Css 将两个元素与“背景过滤器：模糊”（background filter:blur）对齐`

当您使用

背景滤镜：blur（）

将两个元素对齐时，您（自然）会在中间看到一条难看的线。当您需要比简单正方形更复杂的形状时，可能需要两个相邻的此类元素。两个元素如何排列而不产生如此丑陋的线条

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

div{
位置：相对位置；
宽度：400px；
}
.掩护{
背景：rgba（0,0,0,1）；
背景滤镜：模糊（10px）；
-webkit背景滤镜：模糊（10px）；
位置：绝对位置；
顶部：0px；
底部：0px；
宽度：50%；
z指数：1；
}
#左{
左：0px；
顶部：10px；
}
#对{
右：0px；
底部：10px；
}

---

由于您已经被限制使用webkit，您可能需要利用剪辑路径。使用单个封面元素，并为其提供所需的形状

div{
位置：相对位置；
宽度：800px；
}
.掩护{
背景：rgba（0,0,0,1）；
背景滤镜：模糊（10px）；
-webkit背景滤镜：模糊（10px）；
位置：绝对位置；
顶部：0px；
底部：0px；
宽度：50%；
z指数：1；
-webkit剪辑路径：多边形（50%10%、50%0%、100%0、100%90%、50%90%、50%100%、01100%、0%10%）；
}

---

由于您已经被限制使用webkit，您可能需要利用剪辑路径。使用单个封面元素，并为其提供所需的形状

div{
位置：相对位置；
宽度：800px；
}
.掩护{
背景：rgba（0,0,0,1）；
背景滤镜：模糊（10px）；
-webkit背景滤镜：模糊（10px）；
位置：绝对位置；
顶部：0px；
底部：0px；
宽度：50%；
z指数：1；
-webkit剪辑路径：多边形（50%10%、50%0%、100%0、100%90%、50%90%、50%100%、01100%、0%10%）；
}

---

代替@Vals提供的

剪辑路径

解决方案，您可以使用如下多重渐变：

.container{
位置：相对位置；
显示：内联块；
填充：20px；
}
.货柜：在{
内容：“；
背景：
线性梯度（rgba（0,0,0,1），rgba（0,0,0,1））0 20px/50%100%无重复，
线性梯度（rgba（0,0,0,1），rgba（0,0,0,1））100%-20px/50%100%无重复；
背景滤镜：模糊（10px）；
-webkit背景滤镜：模糊（10px）；
位置：绝对位置；
顶部：0px；
底部：0px；
左：0；
右：0；
z指数：1；
}

---

代替@Vals提供的

剪辑路径

解决方案，您可以使用如下多重渐变：

.container{
位置：相对位置；
显示：内联块；
填充：20px；
}
.货柜：在{
内容：“；
背景：
线性梯度（rgba（0,0,0,1），rgba（0,0,0,1））0 20px/50%100%无重复，
线性梯度（rgba（0,0,0,1），rgba（0,0,0,1））100%-20px/50%100%无重复；
背景滤镜：模糊（10px）；
-webkit背景滤镜：模糊（10px）；
位置：绝对位置；
顶部：0px；
底部：0px；
左：0；
右：0；
z指数：1；
}

你想要完美矩形而不是这个？我不清楚你的问题是什么。@AbhishekShah我试图澄清问题中模棱两可的“this”。我想防止图像中间的“模糊线”。“ECG8我试图把问题澄清得更多。你想要完美的矩形而不是这个？我不清楚你的问题是什么。”阿布希克沙哈，我试图澄清这个问题中的暧昧“这个”。我想防止图像中间的“模糊线”。@ ECG8我尝试过更多地澄清这个问题。我需要好好地看看这个（不确定我能按照我需要的方式激活<代码>剪辑路径< /代码>），但是到目前为止看起来很好：D。只要保持点数不变，就可以设置动画。但是如果需要的话，你可以在同一个坐标上有两个点。可悲的是，我不知何故触发了一个奇怪的webkit错误，导致它在我的情况下完全停止转换（如果我删除

背景过滤器或
转换，它会工作，但两者同时完全隐藏元素），但一旦他们修复了它，它至少会很容易添加。很遗憾，Edge采用了相同的
-webkit-
前缀。我已经看到了这个bug，并试图在没有运气的情况下找到解决方法。也许你可以切换到svg？在这里，我想我正在尝试一些非常前沿的东西，需要好好看看这个（不确定我是否能以我需要的方式设置
剪辑路径的动画），但到目前为止，看起来非常好：D。很高兴它起到了作用。只要保持点数不变，就可以设置动画。但是如果需要的话，你可以在同一个坐标上有两个点。可悲的是，我不知何故触发了一个奇怪的webkit错误，导致它在我的情况下完全停止转换（如果我删除
背景过滤器或
转换，它会工作，但两者同时完全隐藏元素），但一旦他们修复了它，它至少会很容易添加。很遗憾，Edge采用了相同的
-webkit-
前缀。我已经看到了这个bug，并试图在没有运气的情况下找到解决方法。也许你可以切换到svg？在这里我想我是在尝试相当尖端的东西