css何时用img,何时用背景图片?

html-css014

css何时用img,何时用背景图片?,第1张

在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然?

如下场景使用img标签比较合适:

1、如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人),使用Img标签加上alt属性。

2、如果你想打印页面并且你想要的图像包括默认情况下使用IMG。

3、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。

4、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。

5、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。

6、使用img代替有背景图像可以显著提高性能的动画背景。

7、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像,加载样式表加载后,延迟加载的网页。

如下场景使用background-image属性比较合适:

1、如果图像不是内容的一部分时使用backgrond-image。

2、当图像代替文本使用时使用backgrond-image。

3、如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。

4、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。

5、如果你只需要展示图像的一部分通过CSS sprites,时使用backgrond-image。

6、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。

absolute绝对固定 , 一般都有个父元素 里面有个relative相对固定,这时候就是相对父元素定位,比如top:10px 就是相对父元素 上部预留10px的高度。 如果没有父元素 就是相对游览器定位 top 就是顶部距离父元素 多高。css中常见的定位 。

background-image是背景图片....

<img />是一个块状元素 他是一个图片

background-image是只能看 的

<img/>是一个document对象 他是可以操作的 比如更换img Src的路径 达到更换图片 的目的

也可以移动他的位置 从document 中移除 等等之类的 操作

background 是CSS样式

img 是HTML标签 本质上存在很大区别

基本上 设置按钮 的样式 会用到background 页面整体的 背景也会用到

商城类 网站的 那些 缩略图 比如京东商城 那些 商品 都是IMG标签 你点的那些按钮 样子都不一样那些都是 background-image