首頁  >  文章  >  web前端  >  如何為background-image設定透明度?

如何為background-image設定透明度?

黄舟
黄舟原創
2017-07-20 09:52:5426674瀏覽

如題,現在是沒法改圖片本身的透明度,該圖片以 background-image 寫在 css 裡,不知道有沒有辦法給他設定透明度?

div{
    position: relative;        
}
div:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(...);
    opacity: 0.5;
}

背景圖用png,有透明度。

元素設定透明度當背景,另一個元素遮蓋到上面 客串下它兒子,假裝是這個元素的內容。

css的opacity屬性可以設定圖片的透明屬性,

#div{
    background-image: url(img.png);
    opacity:0.4;
    filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */ }

無法改變圖片本身的透明度,那隻能改變整個DIV的透明度來達到類似的視覺效果:
1 .opacity屬性
2.如果相容性允許的話使用css3濾鏡-webkit-filter(有別於之前的IE濾鏡)。

看下這個網站的實作方法

Opacity in CSS background images

以上是如何為background-image設定透明度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn