首頁 > web前端 > css教學 > css怎麼設定背景圖片的透明度

css怎麼設定背景圖片的透明度

王林
發布: 2020-11-13 11:59:15
原創
26832 人瀏覽過

css設定背景圖片的透明度的方法:可以利用opacity屬性來進行設置,如【opacity: value|inherit;】。 value規定不透明度,inherit規定從父元素繼承opacity屬性的值。

css怎麼設定背景圖片的透明度

屬性介紹:

opacity 屬性設定元素的不透明層級。

(學習影片分享:css影片教學

文法:

opacity: value|inherit;
登入後複製

屬性值:

value    規定不透明度。從 0.0 (完全透明)到 1.0(完全不透明)。

inherit    應該從父元素繼承 opacity 屬性的值。   

範例:

提示:CSS 中無法直接為背景圖片加上 opacity 屬性,可以使用下面的方法繞過這個限制。

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
登入後複製

相關推薦:CSS教學

#

以上是css怎麼設定背景圖片的透明度的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板