Question

我有一个包含背景图片的HTML元素的页面，#my_div { background-image: linear-gradient( rgba(255,255,255, 0.5), rgba(255,255,255, 0.5) ), url("../images/my_image.jpg"); }属性中指定了不透明度;以这种方式指定不透明度的目的是避免影响除图像之外的该div中任何内容的不透明度。

#my_div:hover {
    background-image:
        linear-gradient( rgba(255,255,255,   1), rgba(255,255,255,   1) ), 
        url("../images/my_image.jpg");
}

当用户将鼠标悬停在图像上时，图像的不透明度会发生变化：

{{1}}

在执行上述操作时是否会导致服务器重新传送用户已下载的相同图像（即导致带宽使用效率低下）？
如果是这样，有什么方法可以避免多次向用户提供图像文件，同时保持上述CSS代码产生的效果？

Answer 1

是否存在执行上述操作导致服务器重新传送已由用户下载的相同图像的情况（即是否会导致带宽使用效率低下）？

不，浏览器会缓存图像。在Web环境中，资源仅被请求一次然后被缓存，除非文件使用Expires标头注释，使其在下次需要之前到期 - 或者缓存已满并且图像被删除。静态文件通常不会过期，因此只会为my_image.jpg发出一个请求，您可以使用浏览器的 F12 工具窗口来检查请求并仅查看请求无论你将鼠标悬停在元素上多少次甚至重新加载页面，都会制作一个（除非你用 Ctrl + F5 重新加载）。

如果是这样，什么是避免多次向用户提供图像文件的好方法，同时保持上述CSS代码产生的效果？

虽然我已回答您的问题以确认它只会发送一次，但您可能需要考虑使用data: URI来处理琐碎的资源（例如16x16像素艺术，图标等）以避免为该资源单独发出请求所涉及的延迟 - 但遗憾的是，如果您想多次指定data: URI资源，则无法对其进行别名以避免重复该文件的代码。

在hover伪类中包含background-image属性会导致再次提供图像吗？

1 个答案: