Проблема с наложением эффекта наложения на изображение PNG (прозрачное) в родительском элементе div с цветом фона - PullRequest
Новая
       65

Проблема с наложением эффекта наложения на изображение PNG (прозрачное) в родительском элементе div с цветом фона

0 голосов
/ 13 апреля 2020

Я верю, что это просто, но я не могу понять это. Я хочу создать эффект наложения на изображение, но у меня проблемы с изображением PNG, в котором есть прозрачность. Черный фон от родительского элемента div заполняет прозрачные части изображения PNG, как если бы части изображения были установлены с непрозрачностью: по умолчанию 0.

Вот мой html

<div class="parent">
<img src="transparent.png"/>
</div>

Вот мой css

.parent {
background-color: #000000;
}
.parent img:hover {
opacity: .7;
}

enter image description here

1 Ответ

1 голос
/ 13 апреля 2020

Вот решение, не так много, чтобы сказать, но значения должны быть изменены соответственно, я только что использовал значения для отображения функции. Прочитайте комментарии кодов 

.parent {
background-color: #000000;
}
.parent img:hover {
  opacity: .1; /*change this accordingly*/
background: rgba(255,255,255,0.5);
/*Last value of rgba is opacity, 0.0 -> 1.0*/
}

.parent img {
  background: rgba(255,255,255,1);;
}
<div class="parent">
<img src="https://www.lunapic.com/editor/premade/transparent.gif"/>
</div>
...