如何在 CSS 中创建方形渐变以使用蒙版 [重复]答案

【问题标题】：How can I create a square gradient in CSS to use a mask [duplicate]如何在 CSS 中创建方形渐变以使用蒙版 [重复]
【发布时间】：2021-08-23 13:24:52
【问题描述】：

使用backdrop-filter css参数，可以模糊一个div的背景：

#image {
  width:300px;
  height:300px;
  background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
}

#image div {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  height: 150px;
  backdrop-filter: blur(12px);
}

<div id="image">
  <div>Blurred</div>
</div>

使用mask-image 参数，您可以添加渐变蒙版以淡出边缘：

#image {
  width:300px;
  height:300px;
  background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
}

#image div {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  height: 150px;
  backdrop-filter: blur(12px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
}

<div id="image">
  <div>Blurred</div>
</div>

有没有办法用这些褪色的边缘创建一个模糊的正方形，可以处理调整大小？或者用另一种方法获得相同效果的方法？

【问题讨论】：

标签： html css webkit gradient linear-gradients

【解决方案1】：

你可以使用一个黑色的 png 来做到这一点，就像这个 https://upload.wikimedia.org/wikipedia/commons/7/76/WX_circle_black.png

#image {
  width:300px;
  height:300px;
  background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
}

#image div {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  display:flex;
  justify-content:center;
align-items:center;
  height: 150px;
  backdrop-filter: blur(12px);
  mask-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/WX_circle_black.png');
  -webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/WX_circle_black.png');
-webkit-mask-size: cover;

}

<div id="image">
  <div>Blurred</div>
</div>

【讨论】：

谢谢！这可能是我最终的结果，但我希望有一种方法可以使其与动态可调整大小的元素一起使用（对不起，我应该在问题中指定）。

【解决方案2】：

在元素内使用box-shadow (inset)。

语法：
<inset> <x-offset> <y-offset> <blur-radius> <spread-radius> <color>

在这个例子中，我只是为了演示目的使用了蓝色。

#image {
  width:300px;
  height:300px;
  background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
  box-shadow: inset 0 0 50px 10px rgba(0, 0, 255, 0.8);
}

<div id="image">
</div>

【讨论】：

我如何将它与模糊效果一起使用（请参阅我的代码 sn-ps）？