避免过滤器模糊导致关闭 DIV 元素模糊答案

【问题标题】：Avoid filter blur causing bluriness on close DIV element避免过滤器模糊导致关闭 DIV 元素模糊
【发布时间】：2016-05-18 00:06:10
【问题描述】：

我有 2 个彼此靠近的 div，并添加了一个新过滤器：blur(5px) 到第二个。我想要的是只使内容看起来模糊，但是由于模糊了所有内容，“模糊”会影响您在此示例中看到的第一个 div：

https://jsfiddle.net/90vozg7g/

CSS 示例：

.one{
  background-color: #FFF;
  color: #000;
  height: 40px;
  border-bottom: 1px solid #000;
}

.two{
  background-color: red;
  color: #FFF;
  height: 40px;  
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

在黑色边框的顶部，我们仍然可以看到一些红色的“模糊”效果。

我希望第一个 div 不受此影响，并且始终处于模糊效果的“顶部”。我尝试了绝对定位和固定定位、z-index 操作等，但似乎没有任何效果（在 chrome win 上测试）。

是的，我知道我可以添加一些填充/边距并避免这种情况，但在我的情况下这是不可能的。

谁知道避免第一个 div 受到模糊影响的方法？

【问题讨论】：

标签： html css

【解决方案1】：

对两个 div 使用相对定位和 z-index 应该可以得到你想要的东西...https://jsfiddle.net/90vozg7g/1/

.one{
    background-color: #FFF;
    color: #000;
    height: 40px;
    border-bottom: 1px solid #000;
    position: relative;
    z-index: 2;
}

.two{
    background-color: red;
    color: #FFF;
    height: 40px;  
    -webkit-filter: blur(5px);
    filter: blur(5px);
    position: relative;
    z-index: 1;
}

如果您不想要重叠的文本，只需插入：

overflow: hidden;

【讨论】：