在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?
这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?
这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
当前回答
浏览器并不总是默认设置为打印背景图像;如果你想让别人打印你的页面:)
其他回答
一个小的输入, 我曾经遇到过响应式图像在iphone上的渲染速度减慢长达一分钟的问题,即使是小图像:
<!-- Was super slow -->
<div class="stuff">
<img src=".." width="100%" />
</div>
但是当切换到使用背景图像时,这个问题就消失了,这只有在针对较新的浏览器时才可行。
对我来说,这是个非黑即白的决定。如果图像是内容的一部分,如logo、图表或人物(真实人物,而不是库存照片人物),则使用<img />标记加上alt属性。其他的都有CSS背景图片。
另一个使用CSS背景图像的时间是在做文本的图像替换时。段落/头。
另一个背景-图像PRO: <ul>/<ol>列表的背景-图像。
如果背景图像是整体设计的一部分,并且在多个页面上重复使用,则使用背景图像。最好以背景精灵的形式进行优化。
对所有不属于整体设计的图像使用标签,并且很可能只放置一次,比如文章、人物的特定图像,以及值得添加到谷歌图像中的重要图像。
**我在<img>标签中唯一重复的图像是网站/公司标志。因为人们倾向于点击它进入主页,所以你用<a>标签来包装它。
IMG首先加载,因为src是在html文件本身,而在背景图片的情况下,源是在样式表中提到的,所以图片在样式表加载后加载,延迟了网页的加载。
有些答案把情况复杂化了。这是一个非常简单的情况。
每次你想放一张图片的时候就回答这个问题:
这是内容的一部分还是设计的一部分?
如果你不能回答这个问题,你可能不知道你在做什么或你想做什么!
此外,不要仅仅因为你想要“打印机友好型”而考虑这两种技术。也不要从SEO的角度用CSS隐藏内容。如果您发现自己在CSS文件中管理内容,那么您是在搬起石头砸自己的腿。这只是什么是内容或不内容的一个微不足道的决定。其他方面都应该被忽略。