Размытие одной стороны изображения - PullRequest
2 голосов
/ 27 мая 2020

Как мне размыть одну сторону изображения, чтобы создать красивый переход от изображения к фону?

Я смог сделать это с помощью этой небольшой хитрости:

.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 не является надежным вариантом.

Есть ли другие способы достичь этого?

1 Ответ

2 голосов
/ 27 мая 2020

Вам нужно правильно написать маску и она надежна 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>

Связанный вопрос, чтобы получить другой эффект: Маска изображения, создание прямоугольника из нескольких градиентов

...