Я делаю всплывающее окно. У меня все сделано, но когда я хочу сделать прозрачность чего-либо за ним (я использую тег body) до 0,6, прозрачность всплывающего окна тоже изменится. Как мне сделать это, когда все, кроме непрозрачности всплывающего окна, отбрасывается? - Заранее спасибо :)Непрозрачность тела, влияющая на всю страницу?
ответ
Попробуйте использовать RGBA вместо непрозрачности:
background-color: rgba(0, 0 , 0, 0.5);
Это: красный, зеленый, синий, альфа-прозрачность
Ну, мне было интересно узнать об этом вопросе и узнать где-нибудь в Stack Overflow, что дочерний элемент никогда не может иметь непрозрачность выше своего родителя и не переопределять его (а не «официальный» источник, но я поверь в это).
Итак, лучшее обходное решение, которое я видел, помещает ваше всплывающее окно вне элемента с низкой непрозрачностью. Поскольку нет смысла размещать всплывающее окно за пределами <body>
, я переношу все содержимое в один div и вывожу всплывающее окно. Например:
Я не могу показать теги тела в JSFiddle, но вот ссылка все равно http://jsfiddle.net/qWRj5/1/
<body>
<div id="all">Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu
Difirenziatum Tiramisu. Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu
Difirenziatum Tiramisu. Lorem Ipsun Delores Sic Transit Glori Repium Sider Traministu
Difirenziatum Tiramisu.
</div>
<div id="popup">My Gosh, that is some awful Latin</div>
</body>
CSS
#all { opacity: 0.5 }
#popup { padding: 10px; border: 2px dotted blue; position: absolute; left: 20px;
top: 10px; background-color: #fce; }
@thirtydot Я действительно хотел, чтобы ваш фрагмент работал :(http://jsfiddle.net/q7Smn/1/ –
С одним из '' было что-то не так, я получаю ту же проблему, когда я напрямую копирую и вставляю HTML Я написал: «Как странно. Вот рабочая версия: http://jsfiddle.net/thirtydot/q7Smn/2/. – thirtydot
- 1. Непрозрачность ребенка, влияющая на родителя
- 2. IE11 flexbox: непрозрачность, влияющая на макет
- 3. flash as3 twacity непрозрачность, не влияющая на непрозрачность дочерних элементов
- 4. Тег тела, не охватывающий всю страницу
- 5. Непрозрачность фонового изображения CSS, влияющая на детей внутри него
- 6. Пользовательский курсор на всю страницу
- 7. CSS: установить всю непрозрачность страницы
- 8. Показаны ссылки на всю страницу
- 9. HTML тела фона изображения не покрывает всю страницу
- 10. Переадресовать всю страницу субдомена на доменную страницу
- 11. Непрозрачность CSS на теге всего тела, кроме одного div
- 12. высота не простирается на всю страницу
- 13. Как заполнить всю область тела?
- 14. Как изменить непрозрачность тела при прокрутке?
- 15. Блокировать всю страницу
- 16. Как сделать всю страницу?
- 17. Ajax.BeginForm заменить всю страницу
- 18. Ajax.Beginform освежает всю страницу
- 19. JS TinyMCE сохраняет всю страницу
- 20. Как скрыть всю страницу?
- 21. Как отключить всю страницу?
- 22. Capybara просмотреть всю страницу
- 23. Загрузите всю веб-страницу
- 24. Сдвиньте вверх всю страницу
- 25. Сделать всю страницу перетаскиваемой
- 26. Таблица, влияющая на размер ячейки
- 27. Тема, влияющая на функцию кода?
- 28. Неизвестная маржа, влияющая на макет
- 29. Задержка, влияющая на остальные инструкции
- 30. Маржа, влияющая на родительские элементы?
Вопросы, подобные этому, были заданы _ many many__. Посмотрите в столбце «Рядом» справа от этого комментария. – Bojangles
Извините ... я не смотрел, я торопился. –
Посмотрите на источник любой из 5 миллиардов существующих реализаций Lightbox, чтобы узнать, как это делается. – thirtydot