网页布局图片背景与img标签使用

Posted 2020-08-25 岚岚子

个人建议同时写背景图片和 img 标签，兼顾SEO 的同时在高对比度模式下也可以正常显示图片。具体代码晚些补上…

使用<img> 还有一个好处是，用户可以很方便的右键保存 Logo 或者复制 Logo 图片的链接。

<h1 class="logo">
  <!-- 注意 a 标签不要加 title，会造成部分读屏软件重复读取 -->
  <a tabindex="2" accesskey="1" href="#">
    <img src="http://www.w3.org/2008/site/images/logo-w3c-screen-lg" alt="W3C">
    <span class="alt-logo">W3C</span>
  </a>
</h1>

.logo a {
  background: url(http://www.w3.org/2008/site/images/logo-w3c-screen-lg) no-repeat 0 0;
  display: block;
  width: 249px;
  height: 107px;
  position: relative;
  overflow: hidden;
  margin: 10px auto;
}

.logo img {
  color: #fff;
}

.logo .alt-logo {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding-left: 22px;
  padding-top: 25px;
  font-size: 50px;
  color: #fff;
  background-color: #075F9F;
}

.alt-logo 的作用是当图片加载失败的时候可以显示一个替代文本，如果只用兼容 IE8 以上，可以用 ::after 伪元素代替。

转自

作者：一丝
链接：https://www.zhihu.com/question/20990026/answer/16834377

 

个人认为的css背景图与html插入img的区别

1.写在css里面的图片是以背景图形式存在的，而写在html里的img是以标签形式存在的，在网页加载的过程中，以css背景图存在的图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html里的img标签是网页结构（内容）的一部分会在加载结构的过程中加载。

 

2.通常是非内容的图片就写在css里面(用来修饰页面的元素)，如果是内容性的图片就写在html里面，

打个比方，你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。

 

3.图片做为背景，在图片没加载的时候或者加载失败的时候，不会有个图片的占位标记，不会出现红叉。