模糊图像的单面答案

【问题标题】：Blur a single side of an image模糊图像的单面
【发布时间】：2020-05-27 19:46:46
【问题描述】：

如何模糊图像的一侧以创建从图像到背景的良好过渡？

我可以通过这个小技巧做到这一点：

.wrapper {
    width: 200px;
    height: 250px;
    overflow: hidden;
}
.image-blurred {
    background-image: url('http://lorempixel.com/200/200/city/9');
    width: 200px;
    height: 200px;
    filter: blur(15px);
    position: relative;
}

.frontimage {
    position: absolute;
    top:0px;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

<div class="wrapper">
<div class="image-blurred"></div>
<div class="frontimage"><img src="http://lorempixel.com/200/200/city/9"></div>
</div>

但-webkit-mask-image 不是一个可靠的选择。

还有其他方法可以实现吗？

【问题讨论】：

标签： html css css-filters css-mask

【解决方案1】：

你需要正确编写掩码并且它是可靠的https://caniuse.com/#feat=css-masks（仅不支持IE并不奇怪）

您还可以像下面这样简化代码：

.frontimage img {
  filter: blur(15px);
}
.frontimage {
  position:relative;
  display:inline-block;
  padding-bottom:50px;
  overflow: hidden;
}

.frontimage::after {
  content:"";
  position:absolute;
  background-image: url('http://lorempixel.com/200/200/city/9');
  top: 0;
  left:0;
  right:0;
  bottom:50px;
  -webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
          mask-image: linear-gradient(to bottom, #fff, transparent);
}

<div class="frontimage">
      <img src="http://lorempixel.com/200/200/city/9">
</div>

获得不同效果的相关问题：Mask Image, create rectangle from multiple gradients

【讨论】：