美文网首页
img标签和CSS背景使用图片在使用场景上有何区别

img标签和CSS背景使用图片在使用场景上有何区别

作者: Maggie_77 | 来源:发表于2016-11-27 14:03 被阅读0次

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

  1. 如果图像是等内容的一部分或图表或人,使用Img标签加上alt属性。
  2. 如果需要打印页面并且默认情况下打印图片则使用IMG。
  3. 使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
  4. 如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
  5. 如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
  6. 使用img代替有背景图像可以显著提高性能的动画背景。

如下场景使用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。

相关文章

  • img标签和CSS背景使用图片在使用场景上有何区别

    如下场景使用img标签比较合适: 如果图像是等内容的一部分或图表或人,使用Img标签加上alt属性。 如果需要打印...

  • svg 初初初初初初初初

    特点:矢量图用途:浏览器直接打开,直接子html内使用svg标签,在html中使用img标签引用,作为css背景。...

  • 移动开发tips

    click事件300ms延迟 使用canvas代替img标签加载图片:使用canvas 和img标签渲染图片的区别...

  • 关于背景图片的 CSS 样式

    有时候会遇到使用背景图还是图片的问题。 背景图:固定不变的内容,需要使用div标签来包裹内容 图片:img 标签的...

  • img问题

    让图片完全显示: 1、使用img标签,设置CSS样式 img{width: 100%;height:100%;} ...

  • JS小技巧

    CSS 穿透覆盖默认样式input标签 上传type="file",使用img遮盖,防止img阻隔点击事件img ...

  • CSS中的背景图片的知识点深度

    在理解css的背景图片之前需要清楚两个问题,在什么情况下去使用css的背景图片?又在什么情况下去使用img标签的内...

  • svg引入方式及资料推荐

    一、引入方式 1、使用img、object、embed 标签或者作为background背景图直接引用svg; 缺...

  • link和@import的区别简析

    我们都知道,外部引入 CSS 有2种方式,link标签和@import。它们有何本质区别,有何使用建议,在考察外部...

  • 前端学习笔记

    何时使用img标签,何时使用background-image背景图像? background-image是背景图片...

网友评论

      本文标题: img标签和CSS背景使用图片在使用场景上有何区别

      本文链接:https://www.haomeiwen.com/subject/jocnpttx.html