Полупрозрачный градиент фонового изображения

#css #css3 #градиент

Возможно ли средствами CSS изменить прозрачность фонового изображения (background-image)
линейно, при помощи градиента. Именно прозрачность, а не наложение цвета сверху, дабы
получить «смешивание» наложенных друг на друга изображений с указанием положения начала
(100% видимость) и положения окончания (0% видимость) градиента? Либо другие не громоздкие
варианты получения схожего результата.
    

Ответы

Ответ 1

Use the mask, Luke!



div {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 256px; height: 256px;
}
#left {
  background: url("https://www.rwsfl.org/wp-content/uploads/2015/06/N2-256x256.jpg");
}
#right {
  background: url("https://pbs.twimg.com/profile_images/633782900077408256/F541mrSs_400x400.jpg");
  -webkit-mask: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
}

#originalLeft {
  top: 400px;
  background: url("https://www.rwsfl.org/wp-content/uploads/2015/06/N2-256x256.jpg");
}
#originalRight {
  top: 400px;
  left: 300px;
  background: url("https://pbs.twimg.com/profile_images/633782900077408256/F541mrSs_400x400.jpg");
}








Поддержка достаточно неплохая, но неполная на момент ответа.


Ответ 2

Я предлагаю использовать SVG для этих целей


Первый шаг — создаём некий квадрат который применим для маски к второму изображению.
В генераторе Inkscape сгенерим filter.
Применим этот filter к нашему квадрату.
Для самого высокого изображения ни каких фильтров кроме параметра width и height
и для обоих изображений preserveAspectRatio="none"
Для изображения которое на половину видно применяем как маску наш rect и располагаем
ниже чем прошлое изображение и в итоге получаем это:









Естественно что маски и фильтры надо располагать между тегами defs и тот слой что
ниже на самом деле выше, это работает как z-index в CSS.

Не будет работать в Edge и IE.