Отключить непрозрачность дочернего элемента, когда родительский элемент имеет непрозрачность

У меня есть контейнер с непрозрачностью 0,8. На заднем плане у меня есть изображение, которое светит через содержимое div. Теперь у меня есть фотография моего клиента в этом контейнере. Проблема заключается в том, что он использует непрозрачность родительского элемента, поскольку непрозрачность для этого изображения просто относительно контейнера, а не тела.

У меня есть этот код:

<div id="contentContainer" style="background: #FFFFFF; opacity: 0.8">
    Content ...
    <img src="..." style="opacity: 1.0" alt="Photo" />
</div>

Это не работает, как описано ниже.

Есть ли у кого-нибудь идея?

Ответ 1

Решил эту проблему, изменив ее на следующее:

<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
    Content ...
    <img src="..." alt="Photo" />
</div>

Используется только rgba alpha вместо непрозрачности. Теперь он работает.

Ответ 2

Как утверждают другие ответы, это невозможно, используя непрозрачность, то есть с помощью этого метода.

Обходной путь/взлом должен заключаться в добавлении position: relative; z-index:2; к родительскому элементу contentContainer. Затем добавьте еще один элемент, который имеет непрозрачность и другие вещи на нем. Это особенно полезно, если у вас есть изображение в качестве фона

Итак, ваша разметка должна выглядеть примерно так:

HTML

<div id="contentContainer">
    Content ...
    <img src="..." alt="Photo" />
    <span id="contentBackground"></span>
</div>

CSS

#contentContainer { position: relative; z-index 2; }
#contentBackground {
    position: absolute;
    display: block;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: /* stuff */;
}

Обратите внимание на свойство z-index. Они важны для обеспечения того, чтобы фоновый элемент находился ниже родительского элемента и не перекрывал контент, предотвращающий события щелчка.

Этот метод также можно использовать с псевдоэлементами (:before или :after), для которых вам нужно добавить content: '';.

Ответ 3

Это невозможно - непрозрачность для элемента и всего его содержимого, и вы не можете "перевернуть" его.

0.8 times 1.0 по-прежнему 0.8, и более высокие значения, чем 1, невозможно для непрозрачности - так что единственное, что вы можете попытаться сделать, - это вывести изображение из контейнера с непрозрачностью и попробуйте сделать так, чтобы он выглядел так, как будто он был внутри (путем позиционирования его над ним, так или иначе).

Ответ 4

Непрозрачность применяется к элементу и любым дочерним элементам/содержимым в элементе.

Для частично прозрачных цветов используйте цвета RGBA bg.

Для частично прозрачных фоновых изображений требуется решение JS/JQ.

Ответ 5

Использовать фон: rgba (красный, зеленый, синий, альфа) может быть хорошим решением, но при использовании с отключенным атрибутом вы можете обнаружить, что он больше не работает в iPhone.

Ответ 6

Это может помочь другим, кто хочет использовать непрозрачность, , предотвращая дочерний элемент от непрозрачного.

Вы можете использовать :not() Селектор. Возьмите этот образец.

<style type="text/css">
    .redbg{
        background-color:red;
    }
    .sample1 :not(.NonOpaque){
        opacity:0.5;
    }
    .sample2:not(.NonOpaque){
        opacity:0.5;
    }
</style>

<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
    <div class="redbg sample1">
        <div>
            SAMPLE 1.
        </div>
        <div class="NonOpaque">
            I am not Opaque.
            Blah! Blah! Blah!
        </div>
        <div>
            I am Opaque.
            Blah! Blah! Blah!
        </div>
        <div>
            I am Opaque.
            Blah! Blah! Blah!
        </div>
    </div>
</div>

<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
    <div>SAMPLE 2.</div>
    <div class="redbg sample2 NonOpaque">
        <div style="padding:5px; margin:3px;">
            I am not Opaque.
            Blah! Blah! Blah!
        </div>
    </div>
    <div class="redbg sample2">
        <div style="padding:5px; margin:3px;">
            We are all Opaque.
        </div>
    </div>
</div>

Вывод: