在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?
这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?
这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
当前回答
正确使用IMG
如果您打算使用IMG 人们打印您的页面,您希望在默认情况下包含图像。 -JayTee 当图像具有重要的语义含义时,例如警告图标,使用IMG(带有alt文本)。这确保了图像的含义可以在所有用户代理(包括屏幕阅读器)中传达。
IMG的实用用途
Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat Use IMG if you rely on browser scaling to render an image in proportion to text size. Use IMG for multiple overlay images in IE6. Use IMG with a z-index in order to stretch a background image to fill its entire window.Note, this is no longer true with CSS3 background-size; see #6 below. Using img instead of background-image can dramatically improve performance of animations over a background.
何时使用CSS背景图像
Use CSS background images if the image is not part of the content. —sanchothefat Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat Use background-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee Use background-image if you need to improve download times, as with CSS sprites. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.
其他回答
如果您希望图像是流动的并可缩放到不同的屏幕尺寸,则可以使用IMG标记。对我来说,这些图片主要是内容的一部分。对于大多数不属于内容的元素,我使用CSS精灵来保持最小的下载大小,除非我真的想要动画图标等。
只是一个小的添加,你应该使用img标签,如果你想让用户能够“右键单击”和“save-image”/“save-picture”,所以如果你打算将图像作为资源提供给其他人。
使用背景图像将(据我所知在大多数浏览器上)禁用直接保存图像的选项。
如果你只想为页面上的特殊内容或仅为一个页面添加图像,你应该使用IMG标签,如果你想把图像放在多个页面上,那么你应该使用CSS背景图像。
Img是一个HTML标记是有原因的,因此应该使用它。用于引用或说明事物,如在文章中。
此外,如果图像有意义或必须是可点击的,img比css背景更好。对于所有其他情况,我认为,css背景可以使用。
尽管这是一个需要反复讨论的话题。
来自法国巴黎的学生
只在必要的时候使用背景图像,例如容器的图像是平铺的。
其中一个主要的优点是使用图像是更好的搜索引擎优化。