CSS控制图片http请求情况---以chrome为例

最新推荐文章于 2023-02-22 15:27:25 发布

兰兰的风。。。

最新推荐文章于 2023-02-22 15:27:25 发布

阅读量287

点赞数

分类专栏： # css 文章标签： img标签背景图片加载请求 display:none visibility:hidden

本文链接：https://blog.csdn.net/pilgrim_121/article/details/113755276

版权

29 篇文章 0 订阅

订阅专栏

img元素标签中出现的图片

1.普通单个img元素：请求1次

<img src="images/bg.jpg" alt="">

在这里插入图片描述
2.多个img元素重复：同上，请求1次
3.单个img元素，加样式属性：style=“display: none”，同上，请求1次
4.单个img元素，加样式属性：style=“visibility: hidden”，同上，请求1次

<div class="box">
        盒子
</div>

1.普通背景：请求1次

.box {
    background: url(images/bg.jpg) no-repeat;
}

在这里插入图片描述
2.重复背景：请求1次
情况①：对一个元素设置两个不同的背景图片

.box {
    background: url(images/bg.jpg) no-repeat;
}
.box {
    background: url(images/bg2.jpg) no-repeat;
}

在这里插入图片描述
情况②：对两个元素设置一个背景图片

<div class="box">
盒子
</div>
<div class="boxbox">
    盒子
</div>

.box {
    background: url(images/bg.jpg) no-repeat;
}
.boxbox {
   background: url(images/bg.jpg) no-repeat;
}

3.作为背景，加入样式属性display: none，不请求
在这里插入图片描述
4.作为背景，加入样式属性visibility: hidden，请求1次

关注