如何使用 CSS 調整背景圖片的不透明度？

使用CSS 產生的內容調整背景圖像不透明度

CSS background-image-opacity 屬性，顧名思義，允許您修改背景圖像的透明度。但是，需要注意的是，CSS 中不存在這樣的屬性。

使用CSS 產生的內容和類別

另一種方法涉及使用CSS 產生的內容來建立褪色背景：

<div class="container">
  contents
</div>

.container {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Consider cropping the image */
}

.container:before {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  content: url('path/to/image.ext');
  opacity: 0.4;
}

.container:hover:before {
  opacity: 1;
}

雖然此技術可讓您顯示褪色背景影像，但它不允許動態調整其不透明度。

使用CSS 過渡

要對背景圖像的不透明度進行動畫處理，您可以使用CSS 過渡：

.container:before {
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

添加到. container:before 規則將導致不透明度在一秒鐘內過渡到1。

瀏覽器相容性

• Firefox 5 及更高版本（也可能包含FireFox 4）
• IE 9（也可能包含FireFox 4） IE 9（
失敗
• )

基於Webkit的瀏覽器（Chrome 26以上）

值得注意的是，目前只有最新版本的Firefox支援這種方式。

以上是如何使用 CSS 調整背景圖片的不透明度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！