html - 模糊图像的单面

Question

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

我可以用这个小技巧做到这一点:

.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不是一个可靠的选择。

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

Answer 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