html - 如果容器不透明度为 0，是否加载背景图像

Question

如果元素不透明度为 0，浏览器是否加载元素背景图像？

.element {
    background-image: url("someurl");
    opacity: 0;
}

Answer 1

在 Chrome 中按 F12，选择过滤器图标并勾选图片。这将显示为当前页面加载的所有图像。

无论 CSS 规则如何，都会像视频和音频等其他媒体一样加载图像。

值得注意的是，当您隐藏您的元素时，可用的技术可以做到这一点:

display:none 从文档流中删除该元素，当您将其设置回 display:block

时会导致重排

visibility:hidden 将元素保持在文档流中，这意味着当您使用 visibility:visible 时它不会导致重排。