在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?
这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?
这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
当前回答
IMG首先加载,因为src是在html文件本身,而在背景图片的情况下,源是在样式表中提到的,所以图片在样式表加载后加载,延迟了网页的加载。
其他回答
我很惊讶没有人提到这个: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转换的信息。
与sanchothefat的回答大致相同,但从不同的角度。我总是问自己:如果我要完全从网站上删除样式表,剩下的元素只属于内容吗?如果是这样,我的工作做得很好。
前景= img。
Background = CSS背景。
使用背景图像时,您需要明确指定尺寸。如果你事先不知道它们或无法确定它们,这可能是一个严重的问题。
<img />的一个大问题是覆盖。如果我想在我的图像上添加一个CSS内阴影(box-shadow:inset 0 0 5px rgb(0,0,0,.5))怎么办?在本例中,由于<img />不能有子元素,因此需要使用定位并添加等同于无用标记的空元素。
总之,这是一种情境。
浏览器并不总是默认设置为打印背景图像;如果你想让别人打印你的页面:)