如題,現在是沒法改圖片本身的透明度,該圖片以 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中文網其他相關文章!