何时使用IMG与CSS背景

在什么情况下使用HTML IMG标签来显示图像比CSS background-image更适合，反之亦然？

因素可能包括可访问性，浏览器支持，动态内容或任何类型的技术限制或可用性原则。

---

正确使用IMG

如果您打算让人们打印您的页面，并且您希望默认包含图像，请使用IMG 。 -JayTee

当图像具有重要的语义含义时，使用IMG （带alt文字），如警告图标。 这确保了图像的含义可以在包括屏幕阅读器在内的所有用户代理中传达。

IMG的语用

如果图像是标识，图表或人物（真人，不是股票照片的人）等内容的一部分，请使用IMG plus alt属性。 -sanchothefat

如果您依靠浏览器缩放比例来渲染图像，请使用IMG 。

在IE6中使用IMG处理多个叠加图像。

使用带有z-index IMG为了拉伸背景图像来填充整个窗口。
请注意，CSS3 background-size不再是这样; 见下面的＃6。

使用img而不是background-image可以显着提高背景动画的性能。

何时使用CSS背景图像

如果图片不是内​​容的一部分，请使用CSS背景图片。 -sanchothefat

在进行图像替换文本时使用CSS背景图像，例如。 段落/头。 -sanchothefat

如果您打算让人们打印您的页面，并且您不希望默认包含图像，请使用background-image 。 -JayTee

如果您需要提高下载时间，请使用background-image ，就像使用CSS精灵一样。

如果只需要background-image的一部分可见，请使用background-image ，就像使用CSS精灵一样。

使用background-image和background-size:cover来拉伸背景图片以填充整个窗口。

---

对我来说这是一个黑色和白色的决定。 如果图片是徽标，图表或人物（真人，不是股票照片）的内容的一部分，则使用<img />标记加alt属性。 对于其他所有的CSS背景图像。

另一次使用CSS背景图像是在做图像替换文本时。 段落/头。

---

我很惊讶没有人提到过这个： CSS转换 。

您可以本机过渡div的背景图片：

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

这可以保存任何类型的JavaScript或jQuery动画以淡入<img/>的src 。

有关MDN上的转换的更多信息。

链接地址: http://www.djcxy.com/p/4817.html

上一篇: When to use IMG vs. CSS background

下一篇: Stretch and scale CSS background