Текст имеет нулевую непрозрачность для одних элементов div, но не для других

Question

Я разрабатываю шаблон начальной загрузки, который размещен здесь: https://tricycle -203819.appspot.com /

Существует странная ошибка, из-за которой заголовок spice road непрозрачен для текста loresum ipsum, но прозрачен для текста в сером блоке jumbotron. Цвет jumbotron серый div не виден через логотип The Spice Road, но текст мог.

Я изменял свойства css в blog.css и bootstrap.css в течение последних 30 минут, но безрезультатно. Кто-нибудь видел эту проблему раньше?

Answer 1

Проблема в том, что заголовок удаляется из обычного потока контента. Jumbotran находится не только над заголовком, но и над заголовком.

Поскольку заголовок всегда находится над остальными элементами, вы можете исправить его, присвоив свойству z-index его произвольное число. Рекомендуется, чтобы оно превышало 1000, поскольку в противном случае оно может помешать z-индексу других элементов. Дозируя так, заголовок всегда поверх другого содержимого страницы.

.header-wrap {
  z-index: 1000;
}

Обновление

Я только что заметил, что вы использовали background-color: rgba(). Кажется, что сафари не поддерживает его.

Чтобы исправить проблему, используйте rgb(255, 255, 255) или #FFFFFF. Вы также можете использовать класс начальной загрузки bg-white.

Answer 2

Добавьте следующие стили в nav-wrap.

z-index: 1;