0

На странице есть статья обернутая в тег 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>

2 ответа 2

2

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

2
  • а разве z-index тут не поможет? 19 авг 2020 в 9:39
  • @АнтонКравцов z-index никак не меняет отношение ребёнок <--> родитель =)
    – Inventor
    19 авг 2020 в 9:42
1

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

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>

5
  • А давно поддерживается запись rgba(0 0 0 / 0.4)?
    – De.Minov
    19 авг 2020 в 9:40
  • 1
    @CbIPoK2513: нет, недавно (пока черновик, но в нём уже называют устаревшим разделение значений запятыми) - drafts.csswg.org/css-color/#rgb-functions
    – UModeL
    19 авг 2020 в 9:58
  • 1
    @CbIPoK2513: на сайте Мозиллы это назывыают "пробельный синтаксис в функциональной нотации" - developer.mozilla.org/ru/docs/Web/CSS/color_value
    – UModeL
    19 авг 2020 в 10:04
  • 1
    Спасибо за решение!
    – mo link
    19 авг 2020 в 10:17
  • @molink: я думаю, что лучше будет заменить на color: rgba(0, 0, 0, 0.4);, всё таки. На всякий случай :-)
    – UModeL
    19 авг 2020 в 10:20

Ваш ответ

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

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