有没有一种方法可以覆盖子元素中的 -webkit-filter: blur？

Question

有没有一种方法可以覆盖子元素中的 -webkit-filter: blur？

3

我正在尝试让我的元素显示在应用模糊效果的图像背景上方。

<body>
<div class="bgImageContainer"></div>
<div class="content"> Some text and stuff here</div>
</body>

现在，我认为第二个div应该嵌套在第一个div中。但是，内容也变得模糊了，我找不到一种方法来禁用“content”元素中的模糊效果。有办法可以做到吗？

- Nikolay Derkach

1

如果元素是一个子元素，则无法覆盖它。同样，对于父级上的 opacity 将使其内部的所有内容也变为透明。 - Josh Powell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Hariri · Accepted Answer

我已经更新了你的 JSFiddle

。

    <body>
      <div class="wrap">
        <div class="bgImageContainer"></div>
        <div class="content"> Some text and stuff here</div>
      </div>
    </body>

很遗憾，在CSS3中无法仅针对背景图像进行定位。解决方法是将所有内容包装为同级元素，但模糊的元素必须是非模糊元素的同级元素。模糊元素的任何子元素都将被模糊处理。希望这可以帮到你！