如何更改类内的背景图像属性？答案

【问题标题】：How to change background-image properties inside class?如何更改类内的背景图像属性？
【发布时间】：2017-03-17 21:04:34
【问题描述】：

我有一个带有背景图像的card-panel div，我只想在背景图像上使用过滤器（棕褐色）（它会在 div 内绘制所有内容）。

如何输入背景图片属性？

.card-panel {
   background-image: url("../img/d1f71749f.jpg");
   position: relative;
   filter: sepia(50%);
}

/* something like this:
   .card-panel background-image {
   filter: sepia(50%);
}
*/

【问题讨论】：

您可以使用一个单独的类，然后仅将背景图像和过滤器应用于该类，这样您的<div> 的 HTML 将有 2 个类，一个用于某些样式，另一个纯粹用于背景图片
这是不可能的——过滤器作用于一个元素及其所有内容。您需要将背景图像放入一个单独的（伪）元素中，对其应用过滤器，并将其放置在您的卡片元素后面。
How to apply a CSS 3 blur filter to a background image的可能重复
@CBroe 谢谢，我不知道！

标签： html css twitter-bootstrap

【解决方案1】：

在父级div 中提供一个子级div，将background-image 提供给子级div，并将filter: sepia(50%); 应用于子级div。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
   position: relative;
}

.child {
   background-image: url("../img/d1f71749f.jpg");
   filter: sepia(50%);
}

【讨论】：