时间戳

首页 > 解决方案 > Chrome 中的其他 DOM css 淡出出现模糊图像的“白色边框”。如何避免这种情况？

html - Chrome 中的其他 DOM css 淡出出现模糊图像的“白色边框”。如何避免这种情况？

问题描述

我的应用中有一个模糊的背景图像覆盖。如果您曾经处理过它，您应该知道图像的模糊边界与背景颜色重叠。为了避免这种情况，我使用了变换比例技巧。每当页面上发生任何不透明度转换（淡入淡出）时，背景叠加层都会被重绘或某些东西和白色边框再次出现半秒。但它不会在 Firefox 中发生。有什么解决方法吗？

我的最终覆盖 div css 规则是

div.overlay {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  z-index: -1;
  filter: blur(15px);
  background-position: center;
  background-size: 90%;
  transform: scale(1.2);
}

这是带有 2 个下拉菜单和一个模式的示例应用程序的小提琴。只需尝试打开然后关闭它们

标签： htmlcsstransitionopacityblur

解决方案

推荐阅读