我有一個由 CMS 生成的 div，其中包含一個背景圖像，我想更改該背景圖像的不透明度，而不影響該 div 子元素的不透明度。https://jsfiddle.net/L5b81yqo/超文本標記語言<div class="container"> <p>Some dummy text</p></div>CSS.container { background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg); width: 100%; height: 500px; background-size: cover;}是否可以使用CSS更改背景圖像的不透明度，而無需在之前/之后使用psuedo（因為這涉及使用背景URL，我無法在樣式表中使用它，因為它是來自CMS的動態并且可以是任何URL）或添加附加標記（因為 CMS 不允許我添加更多標記）。我查看了各種解決方案，但所有這些似乎都使用了我無法使用上面定義的方法，例如https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity如果不可能，那也沒關系，我可以尋找解決方法。
3 回答
慕田峪7331174
TA貢獻1828條經驗 獲得超13個贊
在之前/之后不使用 psuedo （因為這涉及使用后臺 URL，我無法在樣式表中使用它，因為它是來自 CMS 的動態并且可以是任何 URL
您仍然可以使用偽元素并繼承背景，而不需要 url：
.container {
/* I will not touch this */
background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);
/**/
height: 400px;
background-size: 0 0; /* make the main background hidden */
position:relative;
z-index:0;
}
.container::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
background-image:inherit;
background-size:cover;
opacity:0.3;
}
<div class="container">
<p>Some dummy text</p>
</div>
或者如下所示，在頂部有一個簡單的背景顏色層：
.container {
/* I will not touch this */
background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);
/**/
background-size:cover;
height: 400px;
position:relative;
z-index:0;
}
.container::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
background:rgba(255,255,255,0.7);
}
<div class="container">
<p>Some dummy text</p>
</div>
PIPIONE
TA貢獻1829條經驗 獲得超9個贊
.container {
background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);
width: 100%;
height: 500px;
background-size: cover;
background-color: rgba(255, 255, 255, 0.5);
background-blend-mode: color;
}
<div class="container">
<p>Some dummy text</p>
</div>
您可以使用 Banckground-color: rgba(rbg 中的顏色，不透明度) 然后使用 background-blend-mode: color; 來完成此操作 就是這個
慕森王
TA貢獻1777條經驗 獲得超3個贊
您可以使用以下方法實現此目的background-blend-mode
background-blend-mode可以使用background-color，沒有background-color則不行
.container {
background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);
width: 100%;
height: 500px;
background-size: cover;
background-color: rgba(238, 238, 238, 0.81);
background-blend-mode: color;
}
<div class="container">
<p>Some dummy text</p>
</div>
注意：這不會完全像不透明度一樣工作，但它與不透明度類似
- 3 回答
- 0 關注
- 176 瀏覽
添加回答
舉報
0/150
提交
取消