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

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

爱学习的小兰同学

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

阅读量319

点赞数

分类专栏： # css

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

版权

关键词由CSDN通过智能技术生成

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次

关注

专栏目录