Как сделать такую маску css

152

28 августа 2018, 11:10

Есть вот такое изображение. Как с помощью css сделать белый фон на нем. Скорее всего тут нужен псевдоэлемент с линейным градиентом, но не хватает понятия как сделать такой градиент

Answer 1

Примерно так, правильней будет картинку фоном сделать, чтобы не мучится с z-index

.shadow { 
  width: 300px; 
  height: 300px; 
  background: url(https://i.stack.imgur.com/GaCRY.jpg); 
  background-size: cover; 
  box-shadow: inset 0 -240px 100px rgba(255,255,255,1); 
}

<div class="shadow"></div>

Answer 2

Можно использовать css mask. Плюс: настоящая прозрачность. Минус: нет поддержки IE и Edge. Или вариант с псевдоэлементом и градиентом. Тут поддержка браузерами лучше, но цвет придётся подбирать под фон.

*{ 
  box-sizing:border-box; 
} 
body{ 
  margin:0; 
} 
img{ 
  width:100%; 
  max-width:100%; 
} 
.mask{ 
  -webkit-mask:linear-gradient(to bottom,white 15%,transparent 50%); 
} 
.pseudo{ 
  position:relative; 
} 
.pseudo:before{ 
  content:''; 
  display:block; 
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background:linear-gradient(to bottom,transparent 15%,white 50%); 
}

<div class="mask"> 
  <img src="http://turdnevnikzima.ru/wp-content/uploads/2012/12/irinazu2418-%D0%93%D0%BE%D0%BD%D0%BE%D0%BB%D1%8B%D0%B6%D0%BD%D1%8B%D0%B9-%D1%81%D0%BF%D1%83%D1%81%D0%BA-0_8029b_eba72734_XL.jpg" alt="" /> 
</div> 
<div class="pseudo"> 
  <img src="http://turdnevnikzima.ru/wp-content/uploads/2012/12/irinazu2418-%D0%93%D0%BE%D0%BD%D0%BE%D0%BB%D1%8B%D0%B6%D0%BD%D1%8B%D0%B9-%D1%81%D0%BF%D1%83%D1%81%D0%BA-0_8029b_eba72734_XL.jpg" alt="" /> 
</div>