用 CSS 在圖片上添加文字說明

電腦桌 AR 擴充實境 加 LINE 好友 義大利麵+熱狗蛋

🔥 CSS

.album1 a {
  position: relative;
  display:inline-block;
  }

   .album1 img {
  object-fit: cover;
  width:200px;
  height:180px;}

   .album1  span {
      z-index: 1;
     background: linear-gradient(transparent, #000);
      width:100%;
     line-height:33px;
      position: absolute;
      color: white;
      bottom: 5px;
     font-size:15px;
     font-weight:600;
     text-shadow:3px 3px 3px #000;
     font-family: Helvetica , Arial , sans-serif , serif;
     text-align: center;
  }

 @media only screen and (max-width: 480px) {
    
 .mobile .album1 img {
  width:124px;
  height:110px;
  }
  
 .mobile .album1  span {
        width:100%;
        line-height:25px;
        font-size:13px;
      }
  }
  

🔥 HTML

<div class="album1">

<a href="連結網址" target="_blank">
<span>圖片文字說明</span>
<img  src="圖片網址.jpg" />
</a>

<a href="連結網址" target="_blank">
<span>圖片文字說明</span>
<img  src="圖片網址.jpg" />
</a>

<a href="連結網址" target="_blank">
<span>圖片文字說明</span>
<img  src="圖片網址.jpg" />
</a>

<a href="連結網址" target="_blank">
<span>圖片文字說明</span>
<img  src="圖片網址.jpg" />
</a>

</div>