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

來源:互聯網
上載者:User
如題,現在是沒法改圖片本身的透明度,該圖片以 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
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.