是否可以設定背景圖像的不透明度而不影響子元素的不透明度?
頁腳中的所有連結都需要自訂項目符號(背景圖像),且自訂項目符號的不透明度應為 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%; }
您可以將 CSS
linear-gradient()
與rgba()
結合使用。