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

【问题标题】：Can you apply a CSS filter to background-image of a div style element?您可以将 CSS 过滤器应用于 div 样式元素的背景图像吗？
【发布时间】：2017-04-20 19:58:46
【问题描述】：

这是我正在查看的代码：

 <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 的背景图像，而不适用于内容。你认为这可能吗？想法？

【问题讨论】：

标签： css background-image css-filters

【解决方案1】：

你可以使用：

background-blend-mode: difference;

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

【讨论】：

【解决方案2】：

您应该只创建一个单独的 div，并将背景图像嵌套在这个主 div 中。

另一种选择是使用带有背景样式的伪元素 (:before / :after)。

【讨论】：