[筆記] 寫於 CSS 背景圖片路徑如何設定透明度 @地瓜大的飛翔旅程

章節連結

示範程式碼
資料來源

若你的背景圖片是使用 CSS 寫入路徑的，那麼如何調整其圖片透明度呢？這篇既載一下其操作方法。

示範程式碼

 css background image opacity"]<div class="to-intialize-overlay">
  <div class="image-and-overlay"></div>
</div>

.to-intialize-overlay{
  position: relative;
  z-index: 1;
}

.image-and-overlay{
  margin:0px auto;
  background-image: url(https://picsum.photos/id/95/200/300);
  background-size:cover;
  background-position:center;
  background-repeat: no-repeat;
  background-attachment: fixed; /*讓圖片看起來會隨著滑鼠滾動*/
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  opacity: 0.4;
  width: 100%;
  height:100%;
}

css background image opacity"]<div class="to-intialize-overlay">

</div>

.to-intialize-overlay{

position: relative;

z-index: 1;

}

.image-and-overlay{

margin:0px auto;

background-image: url(https://picsum.photos/id/95/200/300);

background-size:cover;

background-position:center;

background-repeat: no-repeat;

background-attachment: fixed; /*讓圖片看起來會隨著滑鼠滾動*/

z-index: -1;

top: 0;

bottom: 0;

left: 0;

right: 0;

position: absolute;

opacity: 0.4;

width: 100%;

height:100%;

}

資料來源

1.Opacity in CSS background images
2.CSS background-image-opacity

按讚加入粉絲團

示範程式碼

資料來源

延伸閱讀