Прозрачный background html

Question

Подскажите пожалуйста, как мне поместить png картинку на background с цветом? Я имею следующий блок:

HTML file

<div class="main">
    <p>Description</p>
</div>

CSS file

.main {
   background: #2D66EE;
}

.main:before {
   background-image: url("https://i.imgur.com/Ia1NuGb.png")
   opacaty: 0.6
}

Но почему-то мою картинку вообще не видно. Как думаете, в чём проблема? Я буду благодарен любой помощи

Answer 1

Один из способов как это сделать:

.main {
  display: flex;
  background-color: #DD66EE;
}

.main:before {
  content:"";
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/King_of_hearts_en.svg/150px-King_of_hearts_en.svg.png');
  background-repeat: no-repeat;
  opacity: .6;
  width: 170px;
  height: 220px;
}

<div class="main">
  <p>Description</p>
</div>

БЛОГ НА HUSL

Прозрачный background html

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