Question

我有2个div彼此靠近并添加了一个新的过滤器：blur（5px）到第二个。我想要的是只让内容看起来模糊，但是因为模糊了所有的模糊性。影响您在此示例中可以看到的第一个div：

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

在黑色边框的顶部，我们仍然看到一些红色的模糊＆＃39;影响。

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

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

任何人都知道避免第一个div受模糊影响的方法吗？

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

避免滤镜模糊导致关闭DIV元素的模糊

1 个答案: