Отключить непрозрачность дочернего элемента, когда родительский элемент имеет непрозрачность
У меня есть контейнер с непрозрачностью 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>
Вывод:
![введите описание изображения здесь]()