Непрозрачность CSS влияет на дочерние элементы

Question

Я пытаюсь реализовать сообщение об ошибке, когда пользователь отключил JavaScript.Я создал jsfiddle для моей текущей работы.У меня есть 2 слоя div, один из которых покрывает всю страницу, а другой поверх этого, чтобы показать предупреждающее сообщение, но настройки непрозрачности влияют на слой обложки и на предупреждениеЯ пытался использовать методы из предыдущих вопросов, но я не мог заставить его работать.Кто-нибудь может мне помочь?

http://jsfiddle.net/xcPcv/

Answer 1

Вместо непрозрачности используйте rgba (0,0,0, .75) для фона:

http://jsfiddle.net/xcPcv/9/

Answer 2

Просто переместите сообщение за пределы выцветшего контейнера ...

От:

<div id="fadeMe">
    <div id="center">You have javascript disabled.</div>
</div>

Кому:

<div id="fadeMe">
</div>
<div id="center">You have javascript disabled.</div>

http://jsfiddle.net/xcPcv/7/

Answer 3

Проблема в том, что прозрачность применяется ко всем содержащимся (дочерним) элементам, а не только к элементу, который вы применяете

    opacity

в. Побочным эффектом этого является то, что дальнейшая настройка непрозрачности будет той частью родительской непрозрачности.

В вашем случае вам не нужно ничего делать, кроме как переместить всплывающий элемент div за пределы блока fadeMe

    <div id="fadeMe"></div>
    <div id="center">You have javascript disabled.</div>