變更背景影像的不透明度,同時保留子元素的可見性
P粉354602955
P粉354602955 2023-10-10 19:40:19
0
1
657

是否可以設定背景圖像的不透明度而不影響子元素的不透明度?

範例

頁腳中的所有連結都需要自訂項目符號(背景圖像),且自訂項目符號的不透明度應為 50%。

HTML

<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>

CSS

#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粉354602955
P粉354602955

全部回覆(1)
P粉574268989

您可以將 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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板