Question

我正在尝试对页面的大部分内容进行简单的模糊处理，而另一个元素位于顶部，不模糊

<div class="stufftobeblurred">
   <header>
     ...
   </head>
   ... most of page is here ...
</div>
<div class="stuffontop">
  ... this isn't blurred ...
</div>

（带有如下所示的CSS）

.stufftobeblurred {
  filter: blur(2px);
}
header {
  position: absolute;
  ...
}

这工作正常，除了在模糊处于活动状态时定位的标题被移动。看到这个小提琴，在这里我将其分解为尽可能少的复制。

https://jsfiddle.net/8hr72gs3/

取消注释模糊并观察蓝色矩形的移动。

我尝试按照搜索匹配的建议应用z-index:0;和transform:translateZ(0)，但这似乎没有效果。

即使模糊半径为0，元素仍会移动。

如果我将margin:0; padding:0应用于身体，这似乎是在解决问题，但是在我的实际情况中，这是行不通的。我不知道小提琴和我的真实单词方案之间的语义区别是什么，因此如果有人能告诉我为什么这种填充/边距应该在小提琴上起作用，则可能有助于进一步诊断。

此外，如果将小提琴修改为具有外部div，则该技巧将不再起作用（如果应用于外部div而不是body，添加或不添加position:relative）

Answer 1

对我来说似乎很奇怪。但显然添加：

id  amount  trs_typ NewBalance
1   10  DR  399
2   11  DR  410
3   25  CR  385
4   65  DR  360
5   58  CR  425
6   45  CR  367
7   65  DR  322

删除在margin-left: -8px; margin-top: -8px;上移动的内容。

在66.0.1（64位）和Chrome版本73.0.3683.86（正式版本）（64位）中进行了测试

它应该已经解决https://bugzilla.mozilla.org/show_bug.cgi?id=1125767

filter: blur

.blurme {
  filter: blur(1px);
  margin-left: -8px;
  margin-top: -8px;
}

.blurme:hover{
  filter: blur(0);
}

.positionme {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: blue;
}

或者通过添加：

<div class="blurme">

  <div class="positionme">


  </div>
</div>

可以将它们固定在左上角。

position: absolute;
left: 0px;
top: 0px;

.blurme {
  filter: blur(1px);
  position: absolute;
  left: 0px;
  top: 0px;
}

.blurme:hover{
  filter: blur(0);
}

.positionme {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: blue;
}

模糊滤镜移动定位的子级

1 个答案: