Text has zero opacity to some divs but not others

Question

I am developing a bootstrap template that is hosted here: https://tricycle-203819.appspot.com/

There is a strange bug whereby the title spice road is opaque to the loresum ipsum text, but is transparent to the text in the jumbotron gray div. The color of the jumbotron gray div cannot be seen through the logo The Spice Road, but the text could.

I have been changing css properties in blog.css and bootstrap.css for the last 30 minutes to no avail. Has anyone seen this problem before?

Answer 1

问题是标头是从内容的正常流程中删除的。 jumbotran不仅在冠军头衔上，而且在标题上也是如此。

由于标题始终位于其他元素之上，因此您可以通过将其z-index属性设置为任意数字来修复它。这是一个好的做法，它超过1000，因为否则它可能会干扰其他元素＆＃39; `z索引。这样，标题总是超过页面的其他内容。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新

我刚注意到您使用了background-color: rgba()。似乎safari不支持它。

要解决此问题，请使用rgb(255, 255, 255)或#FFFFFF。您也可以使用bootstrap的bg-white课程。

Answer 2

将以下样式添加到header-wrap nav。

z-index: 1;