как сделать подобное затемнение на картинке при помощи css?

Question

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

Answer 1

Ну самый простой способ, это использовать картинку с прозрачностью, оно будет работать везде, но чуть больше весить (потому что PNG).

Либо же использовать mask и градиент:

body {background-color: #ccc;}

img {
  display: block;
  max-width: 100%;
  margin: 0;
}

.mask-gradient {
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(75%, #fff), color-stop(97.5%, transparent));
  -webkit-mask: -webkit-linear-gradient(top, #fff 75%, transparent 97.5%);
          mask: -webkit-gradient(linear, left top, left bottom, color-stop(75%, #fff), color-stop(97.5%, transparent));
          mask: linear-gradient(to bottom, #fff 75%, transparent 97.5%);
}

<img class="mask-gradient" src="https://i.imgur.com/F5kM2mi.jpg" width="400">

Answer 2

Можно что-то такое сделать..

.cont {
  width: 100%;
  height: 100%;
  position: relative;
  background: #4CB8B5;
}
.mask-gradient {
  margin: 0 auto;
  display: block;
  border: green solid 1px;
}
.cont:after {
  content: "";
  position: absolute;
  bottom: 0;
  background: linear-gradient(0deg, #4CB8B5 11%, transparent 35%);
  width: 100%;
  height: 100%;
}

<div class='cont'>
  <img class="mask-gradient" src="https://i.stack.imgur.com/c350c.png" width="400">
</div>

БЛОГ НА HUSL

как сделать подобное затемнение на картинке при помощи css?

Ответы (2 шт):