本文小編為大家詳細(xì)介紹“怎么用css偽類解決圖片加載失敗的樣式問題”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么用css偽類解決圖片加載失敗的樣式問題”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

成都創(chuàng)新互聯(lián)從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實(shí)施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元社旗做網(wǎng)站,已為上家服務(wù),為社旗各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

實(shí)現(xiàn)代碼

index.html

    <h3>未做錯誤處理</h3>
     <div style="font-size: 0">
      <img src="./img/image.jpg" alt="" />

      <img src="./img/image-1.jpg" alt="" />
    </div>

    <h3>有錯誤處理</h3>
    <div style="margin-top: 20px; font-size: 0; display: flex">
      <img class="mo-image" src="./img/image.jpg" alt="標(biāo)題" />
      <img class="mo-image" src="./img/image-1.jpg" alt="標(biāo)題" />
    </div>

style.css

img {
  width: 300px;
  height: 150px;
  object-fit: cover;
  display: inline-block;
}

.mo-image {
  display: inline-block;
  /* transform: scale(1); */
  position: relative;
}

/* 顯示占位圖片 */
.mo-image::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5 url(../img/image-error.jpg) no-repeat center / 50% 50%;
  color: transparent;
}

/* 顯示alt中的文字 */
.mo-image::after {
  content: attr(alt);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

讀到這里，這篇“怎么用css偽類解決圖片加載失敗的樣式問題”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：怎么用css偽類解決圖片加載失敗的樣式問題
文章URL：http://www.chinadenli.net/article0/piipio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、微信公眾號、App設(shè)計、動態(tài)網(wǎng)站、服務(wù)器托管、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)