Question

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

警告：此功能仅适用于启用了实验性网络平台功能的Chrome，可能还适用于Safari和Edge 17。

＆＃13;

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;
}

＆＃13;

<div>
  <div id="left" class="cover"></div>
  <div id="right" class="cover"></div>
  <img src="https://www.google.com/google.jpg">
<div>

＆＃13;

Answer 1

由于您已经限制为webkit，因此您可以利用clip-path。使用单个封面元素，并为其提供所需的形状。

＆＃13;

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%);
}

＆＃13;

<div>
  <div class="cover"></div>
  <img src="https://www.google.com/google.jpg">
</div>

＆＃13;

Answer 2

您可以使用多个渐变，而不是@Vals提供的clip-path解决方案：

.container {
  position: relative;
  display:inline-block;
  padding:20px;
}
.container:before {
  content:"";
  background:
  linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))0 20px/50% 100% no-repeat,
  linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))100% -20px/50% 100% no-repeat;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: absolute;
  top: 0px;
  bottom: 0px;
  left:0;
  right:0;
  z-index: 1;  
}

<div class="container">
  <img src="https://www.google.com/google.jpg">
<div>

使用`backdrop-filter：blur（）`排列两个元素

2 个答案: