背景滤镜超出了边框半径

Question

背景滤镜超出了边框半径

16

我正在尝试同时使用CSS的backdrop-filter和border-radius，但是发现背景滤镜似乎超出了边框半径。

body {
  background-attachment: fixed;
  background-color: #541B84;
  background-image: url("https://source.unsplash.com/random");
  background-position: 50% 50%;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.con {
  -webkit-backdrop-filter: blur(1rem) saturate(200%);
  backdrop-filter: blur(1rem) saturate(200%);
  background: rgba(247, 247, 249, 0.8);
  border-radius: 100%;
  font-size: 7rem;
  font-weight: 300;
  height: 11rem;
  line-height: 1.5;
  margin: 1rem auto;
  width: 11rem;
  text-align: center;
}

<body>
  <div class="con">KM</div>
</body>

- Kristian Matthews

2个回答

8

在此修复发布之前，您可以通过在父元素上使用0像素模糊作为背景过滤器来避免此错误。这需要隐藏溢出，因此您示例中的K和M的边缘不再可见。

body {
  background: url("https://source.unsplash.com/random") center /cover;
  height: 100%;
  width: 100%;
}

.con {
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  margin: 1rem auto;
  width: 11rem;
  height: 11rem;
  overflow: hidden;
  border-radius: 50%;
  font-size: 7rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  position: relative;
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(0.1em);
  backdrop-filter: blur(0.1em);
  border-radius: 50%;
  margin: -1px;
}

<body>
  <div class="con">
    <div class="inner">KM</div>
  </div>
</body>

- Stephen Hutchings

3

这似乎不起作用，它只是完全禁用了“模糊”效果。 - Edmundo Santos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tiago Marinho · Accepted Answer

你刚发现了一个bug！

这是针对WebKit的实现中backdrop-filterCSS属性存在的一个bug。它没有考虑到过滤器的border-radius限制 - 即使使用overflow: hidden;也不行。

对于使用backdrop-filter的元素应用的任何遮罩属性，例如clip-path，情况都是一样的，截至2016年5月21日，最新的WebKit Nightly Build仍未解决此问题。

由于这个问题还没有解决，你有三个选择:

等待修复以实现该功能。
无论如何都要实现有缺陷的功能，因为这不是你的代码问题。
改用JavaScript。

在这个问题不太明显的情况下（即：border-radius：5px;），我会选择第二个选项，并尽量避免在bug变得非常明显时（例如在您的片段中）再使用它。

这是WebKit Bugzilla上的bug报告：https://bugs.webkit.org/show_bug.cgi?id=142662

编辑：

自从补丁已经实现，WebKit Bugzilla bug报告于2016/05/25关闭。修正已在最新的WebKit Nightly Build中显示。