背景滤镜超出边界半径

Question

背景滤镜超出边界半径

我试图使用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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 8

在此修复发布之前，您可以通过在父元素上使用 0px 模糊作为背景滤镜来避免此错误。这需要隐藏溢出，因此示例中 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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

这似乎不起作用，它只能完全禁用“模糊”效果。 (3认同)

Answer 2

Tia*_*nho 7

你刚刚发现了一个错误!

这是一个bug关于WebKit的backdrop-filterCSS属性的实现.它没有考虑border-radius过滤器的划分 - 即使在使用时也没有overflow: hidden;.

对于clip-path使用元素的几乎任何掩蔽属性都是如此backdrop-filter,截至2016年5月21日,它仍然在最新的WebKit Nightly Build中未解决.

虽然这个问题没有解决,但您有三种选择:

等待修复以实现该功能.
无论如何都要实现有缺陷的功能,因为这不是代码的问题.
请改用javascript.

如果这个问题不太明显(即border-radius: 5px;),并且当bug变得图形明显时(例如在你的代码片段中),我会坚持使用第二个选项.

这是WebKit Bugzilla的错误报告:https://bugs.webkit.org/show_bug.cgi？id = 142662

编辑:

Webkit Bugzilla错误报告于2016/05/25关闭,因为补丁已经登陆.在最新的webkit每晚构建中可以看到更正.;)

归档时间：	10 年，5 月前
查看次数：	2378 次
最近记录：	8 年，11 月前