是否可以設定背景圖像的不透明度而不影響子元素的不透明度?
頁腳中的所有連結都需要自訂項目符號(背景圖像),且自訂項目符號的不透明度應為 50%。
<div id="footer"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div>
#footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; }
我嘗試將清單項目的不透明度設為 50%,但連結文字的不透明度也是 50% - 並且似乎沒有辦法重置子元素的不透明度:
#footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; /* will also set the opacity of the link text */ opacity: 0.5; }
我也嘗試過使用 rgba,但這對背景圖像沒有任何影響:
#footer ul li { /* rgba doesn't apply to the background image */ background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%; }
P粉5742689892023-10-11 13:07:40
您可以將 CSS linear-gradient()
與 rgba()
結合使用。
div { width: 300px; height: 200px; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg"); } span { background: black; color: white; }
<div><span>Hello world.</span></div>