时间戳

首页 > 解决方案 > 将两个元素与`backdrop-filter: blur()`对齐

css - 将两个元素与`backdrop-filter: blur()`对齐

问题描述

当您将两个元素与 a 对齐时，backdrop-filter: blur()您（自然）会在中间得到一条丑陋的线。尽管如此，当您需要比简单正方形更复杂的形状时，可能需要两个相邻的元素。两个元素如何排列而不产生如此丑陋的线条？

警告：这仅适用于启用了实验性 Web 平台功能的 Chrome，并且可能适用于 Safari 和 Edge 17。

div {
  position: relative;
  width: 400px;
}
.cover {
  background: rgba(0,0,0,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 50%;
  z-index: 1;
}
#left {
  left: 0px;
  top: 10px;
}
#right {
  right: 0px;
  bottom: 10px;
}
<div>
  <div id="left" class="cover"></div>
  <div id="right" class="cover"></div>
  <img src="https://www.google.com/google.jpg">
<div>

标签： css

解决方案

由于您已经仅限于 webkit，因此您可以利用 clip-path。使用单个封面元素，并给它你想要的形状。

div {
  position: relative;
  width: 800px;
}
.cover {
  background: rgba(0, 0, 0, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 50%;
  z-index: 1;
  -webkit-clip-path: polygon(50% 10%, 50% 0%, 100% 0, 100% 90%, 50% 90%, 50% 100%, 0 100%, 0% 10%);
}
<div>
  <div class="cover"></div>
  <img src="https://www.google.com/google.jpg">
</div>

推荐阅读