设置display:none是否会触发http请求？

1. 元素本身设置{display: none;}

无论是img标签还是background-image，都会发起请求，但是不会渲染出来
例子：

<div class="container" style="display:none"></div>
<img src="../imgs/b.png" style="display:none">

<style>
.container{
  background-image: url(../imgs/a.png);
}
</style>

例子中a.png和b.png都会触发http请求

2. 父元素设置{display: none;}

如果父元素有{display: none;}的话，子元素的背景图片既不会渲染也不会加载，但是标签上的图片会被加载不会被渲染

<div style="display:none">
  <div class="container"></div>
  <img src="../imgs/d.png">
</div>

<style>
.container{
  background-image: url(../imgs/c.png);
}
</style>

例子中c.png和d.png都不会被渲染，但d.png会触发http请求，c.png不会

3. html中不存在的元素，即使css设置了background-image也不会加载

4. 伪类背景图只有在触发伪类时才会加载

5. 由于缓存，请求过的相同图片不会重复请求