Управление прозрачностью Opacity

Статус
Закрыто для дальнейших ответов.
Регистрация
20.05.2015
Сообщения
6
Приветствую всех.
Вопрос от новичка: при использовании свойства прозрачности у вложенного блока свойство прозрачности наследуется, например:
<div style={opacity: 0.3;}>
<div style={opacity: 1;}>
</div>
</div>

а у вложенного блока нужно сделать непрозрачный фон (например, в модальных окнах). Как решаете такую задачу?

Спасибо за подсказку.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
RGBA тебе в помощь.

Модальные окна делают в два разных слоя.
 
Регистрация
20.05.2015
Сообщения
6
Идею с двумя слоями знаю - в них как раз первый слой делается прозрачным, а второй непрозрачным.
Вот здесь и засада - если первый слой делаю сильно прозрачным (opaciy 0.5 и менее), то второй слой тоже становится прозрачным.

https://jsfiddle.net/alexlead/td3styhs/4/

вот мой пример в песочнице. У нижнего слоя меняешь opacity и у кнопок автоматически меняется. Попробовал background в rgba - результат одинаковый.
на всякий случай попробовал z-index тоже не помогает.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Модальные окна делают в два разных слоя.
Не надо вкладывать их в друг-друга и будет счастье.

В твоём пример не понятно зачем ты делал прозрачность родителю. Всё шиворот навыворот
https://jsfiddle.net/td3styhs/5/
 
Регистрация
20.05.2015
Сообщения
6
Понял, теперь всё отлично работает. Спасибо за подсказку
 
Статус
Закрыто для дальнейших ответов.
Верх Низ