網頁佈局圖片背景與img標簽使用

個人建議同時寫背景圖片和 img 標簽，兼顧SEO 的同時在高對比度模式下也可以正常顯示圖片。具體代碼晚些補上…

<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;
}

個人認為的css背景圖與html插入img的區別