Текст имеет нулевую непрозрачность для некоторых div, но не для других
Я разрабатываю шаблон начальной загрузки, который размещен здесь: https://tricycle-203819.appspot.com/
Существует странная ошибка, при которой заголовок spice road непрозрачен для текста loresum ipsum, но прозрачен для текста в сером div jumbotron. Цвет серого div jumbotron нельзя увидеть сквозь логотип The Spice Road, но текст можно.
Я менял свойства css в blog.css и bootstrap.css в течение последних 30 минут, но безрезультатно. Кто-нибудь видел эту проблему раньше?
Ответы 2
Добавьте следующие стили для переноса заголовка nav.
z-index: 1;
Это плохая практика. Проблема в другом месте
Да, ты прав. удаление этого ответа. свяжусь с тобой, если найду что-нибудь
Попробуйте обновленный ответ. Хотя я не уверен, почему он так себя ведет, но я предполагаю, что это как-то связано с исправлением переноса заголовка
Проблема в том, что заголовок удаляется из обычного потока содержимого. Джамботран находится не только над заголовком, но и над заголовком.
Поскольку заголовок всегда находится над другими элементами, вы можете исправить его, присвоив его свойству z-индекс произвольное число. Рекомендуется использовать больше, чем 1000, поскольку в противном случае он может мешать работе z-index других элементов. При этом заголовок всегда находится над остальным содержимым страницы.
.header-wrap {
z-index: 1000;
}Обновлять
Я только что заметил, что вы использовали background-color: rgba(). Похоже, что сафари это не поддерживает.
Чтобы решить эту проблему, используйте rgb(255, 255, 255) или #FFFFFF. Вы также можете использовать класс начальной загрузки bg-white.
Хорошо по какой-то причине это решение не работает сафари. Заголовок теперь полностью прозрачен для базовых div.
@ chibro2 снова обновил ответ. Я не знал, что вы используете rgba.
ах, это решает проблему. Однако, если я хочу, чтобы пользователи нажимали на jumbotron, повлияет ли установка z-index на -1?