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

Question

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

我想要实现的目标：

静止状态：背景图像去饱和并覆盖半透明彩色分区

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

显然，我们正在深入研究将CSS过滤器继承给孩子的问题。我必须添加一个技术限制，这使我目前无法做到：背景图像不能应用于像:before这样的伪元素。原因是：它是在最终应用程序中与php内联注入的。±la:<div class="background-image"<?php ... ?>">

这是目前的体育场

当前问题：覆盖被灰度化，因为父对象被灰度化。如前所述，我尝试了不同的方法，结果总是遇到类似的问题。感觉像在兜圈子。有人有主意吗？

Answer 1

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

旧的演示键盘

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

-更新-

你是对的，由于不透明影响了所有的孩子，文本最终也褪色了。如果不能使用before类，则意味着必须稍微更改HTML。将背景移动到不同的元素使其不会影响h1。然后您只需要将h1定位在背景图像上。

更新的演示

HTML:

<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> 

CSS：

.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;
}