2021-11-04 17:00发布
在网页中需要插入图片时，什么时候用CSS样式插入，什么时候用img插入？他们之间有什么区别？各自插入图片都有什么好处？
如下场景使用img标签比较合适：
1、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。2、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。3、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。4、使用img代替有背景图像可以显著提高性能的动画背景。5、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。
如下场景使用background-image属性比较合适：1、如果图像不是内容的一部分时使用backgrond-image。2、当图像代替文本使用时使用backgrond-image（避免出现无语义化标签）。3、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。4、如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。5、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 猫吃鱼 的问题《在网页中需要插入图片时，什么时候用CSS样式插入，什么时候用img插入？》','http://www.shouhuola.com/answer/37100/138616.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
如下场景使用img标签比较合适：
1、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
2、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
3、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
4、使用img代替有背景图像可以显著提高性能的动画背景。
5、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。
如下场景使用background-image属性比较合适：
1、如果图像不是内容的一部分时使用backgrond-image。
2、当图像代替文本使用时使用backgrond-image（避免出现无语义化标签）。
3、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
4、如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。
5、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。
一周热门 更多>