避免过滤器模糊导致关闭DIV元素的模糊性

Question

我有两个彼此靠近的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索引操作等，但似乎什么都不起作用（在chrome-win上测试）。

是的，我知道我可以添加一些填充/边距来避免这种情况，但就我而言，这是不可能的。

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

Answer 1

使用两个div的相对定位和z索引应该可以得到您想要的。。。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;