在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?
这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?
这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
当前回答
如果您将CSS放在外部文件中,那么将站点中频繁使用的图像(例如头部图像)显示为背景图像通常是很方便的,因为这样您以后就可以灵活地更改图像。
例如,假设你有以下HTML:
<div id="headerImage"></div>
...和CSS:
#headerImage {
width: 200px;
height: 100px;
background: url(Images/headerImage.png) no-repeat;
}
几天后,您更改了图像的位置。你所要做的就是更新CSS:
#headerImage {
width: 200px;
height: 100px;
background: url(../resources/images/headerImage.png) no-repeat;
}
否则,您必须在每个HTML文件中更新适当的<img>标记的src属性(假设您没有使用服务器端脚本语言或CMS来自动化该过程)。
另外,如果你不希望用户能够保存图像,背景图像也是有用的(尽管我从来没有需要这样做)。
其他回答
只在必要的时候使用背景图像,例如容器的图像是平铺的。
其中一个主要的优点是使用图像是更好的搜索引擎优化。
一个小的输入, 我曾经遇到过响应式图像在iphone上的渲染速度减慢长达一分钟的问题,即使是小图像:
<!-- Was super slow -->
<div class="stuff">
<img src=".." width="100%" />
</div>
但是当切换到使用背景图像时,这个问题就消失了,这只有在针对较新的浏览器时才可行。
此外,我有一个画廊部分,有不一致的图片大小,所以即使这些图像显然被认为是内容,我使用背景图像和中心它们在divs设置大小。这类似于facebook在他们的相册里做的事情。
这里有一个技术上的考虑:图像是动态生成的吗?在HTML中生成<img>标记往往比尝试动态编辑CSS属性容易得多。
浏览器并不总是默认设置为打印背景图像;如果你想让别人打印你的页面:)