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的style =的输出，因为主题会创建它。

我想要做的是对图像背景应用滤镜。当我使用时：

.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）和背景样式。

Answer 2

您可以使用：

background-blend-mode: difference;

如果它符合您的浏览器要求：https://caniuse.com/#feat=css-backgroundblendmode

你可以将CSS过滤器应用于div样式元素的背景图像吗？

2 个答案: