您可以將CSS濾鏡應用於div樣式元素的背景圖片嗎？

Question

下面是我在看代碼：

<div class="fullwidth-box vas_row-back1" style="background-color: 
rgba(99,59,0,0.79);background-image: 
url(&quot;http://example.com/wp-content/uploads/2015/11/myphoto.jpg&quot;);background-position: 
center center;background-repeat: 
no-repeat;padding-top:80px;padding-right:40px;padding-bottom:80px;padding-left:40px;margin-bottom: 
60px;margin-top: 
30px;-webkit-background-size:cover;-moz-background-size:cover;-o- 
background-size:cover;background-size:cover;background- 
attachment:none;"> 

我可以控制的.vas_row-back1類的CSS，但我不能改變的div風格的輸出=因爲主題創造了這一點。

我想要做的是將過濾器應用於圖像背景。當我使用：

.vas_row-back1[style] { 
-webkit-filter: grayscale(80%); /* Safari */ 
filter: grayscale(80%); } 

過濾器適用於整個DIV，包括內容。

當我嘗試：

.vas_row-back1[style]:background-image { 
-webkit-filter: grayscale(80%); /* Safari */ 
filter: grayscale(80%); } 

它不註冊所有，打破了類。我希望能夠將濾鏡僅應用於DIV的背景圖像，而不應用於內容。你認爲這是可能的嗎？思考？

Answer 1

你應該製作一個單獨的div與背景圖像嵌套在這個主div。

另一種替代方法是使用具有背景樣式的僞元素（:before/:after）。