html - CSS 过滤器继承问题 : Solution without pseudo element for dynamic sized divs?

Question

一段时间以来，我一直在尝试解决以下问题，但未能提出可行的解决方案。

我想要实现的目标:

静止状态:背景图像去饱和并覆盖半透明的彩色 div。

悬停阶段:使图像饱和，改变叠加层的颜色

显然，我们正在研究将 CSS 过滤器继承给子项的问题。我必须添加一个技术限制，这对我来说到目前为止是不可能的:背景图像不能应用于像 :before 这样的伪元素。 。原因是:它是在最终应用程序中与 php 内联注入(inject)的。拉:<div class="background-image"<?php ... ?>">

Here's the current stadium in a fiddle.

目前的问题:overlay正在灰度化，因为parent正在灰度化。如前所述，我尝试了不同的方法，但总是以类似的问题告终。感觉就像在兜圈子。有人有想法吗？

Answer 1

这是一个可能适合您的解决方案:

Old Demo Fiddle

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

-更新-

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

Updated Demo

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