Наложение цвета на цвет | CSS

Question

Есть блок, который изначально имеет цвет rgba(34, 33, 35, 0.8), на него нужно наложить цвет rgba(255, 185, 67, 0.2), чтобы получилось так, как на картинке:

наложение цветов

Я пробовал способ:

.container {
  background-image: url('image.jpg');
  background-color: ;
  background-blend-mode: screen;
}

Но в итоге получился эффект не тот, что нужен.

Answer 1

в ваших примерах изображения содержится не один блок с разными фонами, а два блока каждый со своим фоном.

body {
  background: url(https://i.imgur.com/eWtfMME.png) no-repeat center;
  background-size: cover;
}
.wrapper {
  background: rgba(34, 33, 35, 0.8);
  border-radius: 1rem;
  border: 2px solid red;
  height: 4rem;
  position: relative;
  
}
.inner {
  background: rgba(255, 185, 67, 0.2);
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width:50%;
  border-radius: 1rem;
  border: 2px solid red;
  margin: -2px;
}

<div class="wrapper">
  <div class="inner">
</div>

БЛОГ НА HUSL

Наложение цвета на цвет | CSS

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