Как не наследовать стиль от родительского элемента

У меня есть CSS-элемент с непрозрачностью над картинкой на заднем плане. Внутри этого элемента есть изображение, которое наследует непрозрачность, поэтому изображение несколько темнее, чем обычно:

<body>
 <div class="trans">
  <img class="not_trans" src="test.png">
 </div>
</body>

CSS:

body{
 background:url(stars.gif);
 background-color:black;
}
.trans{
 opacity:0.4;
}
img.not_trans{
 opacity:1.0;
}

Но изображение все еще наполовину прозрачно.

Как я могу добиться нормального непрозрачного изображения без перемещения img вне div?

Если есть много элементов, каскадированных с различными цветами фона, используя
background-color:rgba(0,0,0,0.4) вместо opacity это не простой вариант

Я хочу только одного img элемент, чтобы не наследовать прозрачность окружающих элементов

По крайней мере, было бы решение с помощью JavaScript:

  1. переместите тег img в DOM из div
  2. вместо этого установите проставку
  3. позиционировать img где это было с position:absolute

Но есть ли решение с помощью CSS?

Источник

1 ответ

Используйте RGBA на вашем .trans вместо непрозрачности! Подобно rgba(0, 0, 0, 0,4); или какой у вас цвет.

Источник
Другие вопросы по тегам