0

Подскажите пожалуйста, как мне поместить 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
}

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

1
  • 1
    Потому что нет свойства content, как минимум + нужно как-то спозиционировать псевдоэлемент. Нет ; после background-image: url("https://i.imgur.com/Ia1NuGb.png") и opacity а не opacaty.
    – Simon
    4 янв 2023 в 15:54

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.