网页中插入图像

针对普通类图片

IMG vs CSS background-image

• 使用IMG
  • 图像是内容的一部分
    • 网站logo如支付宝注册页面、图表、照片人物等与上下文有关的，需要使用atl属性
    • 利于搜索引擎、屏幕阅读器
  • 对于轮播图等需要JavaScript来控制的图像
  • 流式图像，宽高设为百分比，随着浏览器窗口的变化而变化
• 使用background-image
  • 图像不是内容的一部分
  • 拉伸图像覆盖整个浏览器窗口

    background-size: cover

  • 精灵图（使用精灵图时，只需要操作background-position就可以替换图片）
    • 减少下载次数
    • 只需要展示一部分的图像

  • 可以使用背景图片替换标题标签如h1的文字,这样既可以使用h1标签对搜索引擎和屏幕阅读器友好，又可以定制自己的图片。

      
    Section Header
    .headerReplacement {text-indent: -9999px;width: 600px;height: 100px;background: url(/path/to/your/image.jpg) #cccccc no-repeat;  }

针对图标类图片

CSS background-image vs CSS content

• 使用content的情况，在content里面使用url
  • 普通类图标
  • 能够用CSS画出的形状图像，则用content元素。
  • 定位：用绝对定位position:absolute实现图片放置在任意位置
• 使用backgroung-image的情况
  • 状态类图标，如error(QQ注册页面)表单、鼠标hover或者选中之后，图标变换等，同样在QQ注册页面下
  • 
  • 对于一些元素如input、select、img无法使用伪元素添加图标，如网站顶部搜索栏，则用background-image
  • 与content同等条件下，要求兼容性更好的（IE8下）
  • 定位：使用padding为图标留位置，并结合使用background-position定位

• 两者结合的情况，此时

  content: ""

  为空，url添加到background中，如自定义复选框样式

     :root input[type=checkbox]   label:before {content: "";display: inline-block;width: 16px;height: 16px;margin: 0 .5em 0 0;background: url(http://developer.mozilla.org/files/4173/checkbox-sprite.png ) no-repeat 0 0;}

总结

• 对于图片类，则按照以上分析选择background或IMG。
• 对于图标类，优先使用background，因为以后这个图标一般为状态类居多，此时只需要添加一个激活的类添加另一张背景图即可覆盖。l灵活使用background-size: contain或cover。

参考资料

• When to use IMG vs. CSS background-image?
• 网站的 logo 图片用 img 标签还是背景图片合适?
• content
• :before;:after伪元素妙用
• Header Text Image Replacement
• 《Head First HTML与CSS 第2版》

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！