Как игнорировать значение родителя в css

Question

На странице есть статья обернутая в тег p у данного тега стоит opacity: 0.8, из админки в тег p вставляется картинка, из-за того что в родителе есть прозрачность она применяется к картинке. Как указать картинке opcity: 1?

div {
  max-width: 70%;
}

p img {
  max-width: 100%;
}

p {
  opacity: 0.8;
}

<div>
  <p>Песня "All The Things She Said" (в русском варианте - "Я сошла с ума") полифигурно имитирует ревер. Адажио, так или иначе, mezzo forte имеет сет. Пласт, и это особенно заметно у Чарли Паркера или Джона Колтрейна, просветляет серийный гипнотический рифф.</p>
  <p><img src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt=""></p>
  <p>Кризис жанра полифигурно образует контрапункт контрастных фактур. Трехчастная фактурная форма, согласно традиционным представлениям, полифигурно дает нечетный канал. Пуантилизм, зародившийся в музыкальных микроформах начала ХХ столетия, нашел далекую
    историческую параллель в лице средневекового гокета, однако субтехника полифигурно иллюстрирует структурный сет.
    <a href="">Внутридискретное</a> арпеджио трансформирует мнимотакт.</p>
</div>

Answer 1

Никак. В любом случае свойство opacity будет работать на все дочерние элементы. Разместите тег img вне тега p, чтобы к нему не применялось значение opacity

Answer 2

Если стоит задача - не трогая разметку, сделать полупрозрачный текст - то, можно именно ему и задавать прозрачность:

div { max-width: 70%; }

p img { max-width: 100%; }

p, p *:not(img) {
  color: rgba(0 0 0 / 0.4);
  transition: color .5s ease;
}
p:hover, p:hover *:not(img) {
  color: rgba(0 0 0 / 1);
}

<div>
  <p>Песня "All The Things She Said" (в русском варианте - "Я сошла с ума") полифигурно имитирует ревер. Адажио, так или иначе, mezzo forte имеет сет. Пласт, и это особенно заметно у Чарли Паркера или Джона Колтрейна, просветляет серийный гипнотический рифф.</p>
  <p><img src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt=""></p>
  <p>Кризис жанра полифигурно образует контрапункт контрастных фактур. Трехчастная фактурная форма, согласно традиционным представлениям, полифигурно дает нечетный канал. Пуантилизм, зародившийся в музыкальных микроформах начала ХХ столетия, нашел далекую
    историческую параллель в лице средневекового гокета, однако субтехника полифигурно иллюстрирует структурный сет.
    <a href="">Внутридискретное</a> арпеджио трансформирует мнимотакт.</p>
</div>

БЛОГ НА HUSL

Как игнорировать значение родителя в css

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