Html CSS过滤器继承问题：动态大小div没有伪元素的解决方案？

我已经尝试解决以下问题一段时间了，但是没有找到一个有效的解决方案

我想要实现的目标：

静止状态：使背景图像去饱和，并用半透明的彩色div覆盖

悬停阶段：使图像饱和，更改覆盖的颜色

---

显然，我们正在潜入将CSS过滤器继承给孩子的问题。我必须添加一个技术限制，这使我目前无法做到：背景图像不能应用于像

：before

这样的伪元素。原因是：它在最终的应用程序中与php内联注入。Àla:

这里有一个可能适合您的解决方案：


就像你说的，这里的问题是灰度过滤器。通过将过滤器和背景图像移动到
.post preview
div，您可以将
.post preview wrapper
设置为
背景色：红色
，并通过
不透明
切换获得红色叠加效果。我认为这应该适用于您的限制，因为它针对的是您已经在使用的元素

-更新-

你说得对，因为不透明会影响所有的孩子，所以文字也会褪色。如果你不能在类之前使用
，那就意味着你必须稍微修改一下HTML。将背景移动到另一个元素可以使其不影响
h1
。然后您只需将
h1
定位在背景图像上


HTML:

你能构造一个与你描述的限制相匹配的小提琴吗？这将减少某人创建超出此限制的解决方案的可能性。Good point@BoltClock，我相应地更新了小提琴。显然没有使用PHP，但我认为它仍然有意义。谢谢@badAdviceGuy。问题是，不透明度被继承到文本中。因此，文本在静止状态下不能是100%白色。对吗？这正是我的“转圈”问题…@psteinweber，关于文本不透明度的观点很好。我没听清楚。请在我的答案中查看我的编辑，它们可能适用于您。
<div class="post-preview-wrapper">
    <div class="post-preview">
         <div class="post-preview-bg"></div>
         <h1><a href="#">Lorem ipsum dolor sit amet.</a></h1>
    </div>
</div> 

.post-preview-wrapper {
    // current styles

    background-color: red;
    position: relative;
}

.post-preview > h1 {
    position: absolute;
    top: 0px;
    padding: 75px;
}

.post-preview-wrapper:hover .post-preview-bg {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
}

.post-preview-bg {
    opacity: .75;
    height: 210px;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    background-image: url('http://lorempixel.com/output/cats-q-c-640-480-7.jpg');
    background-size: cover;
    background-position: center center;
    -webkit-transition: 0.2s all ease-in;
    transition: 0.2s all ease-in;
}