html - 如何让主体背景颜色停止应用于 div？

Question

仍在研究整个网络开发的事情，我不清楚为什么我 body 的背景颜色被应用到它上面的 div 上。

我正在使用来自 cdn 的 bootstrap，然后在顶部有这些样式标签:

 <style type="text/css">
            body{
                background-color:Navy;
            }
            .mechBackground {
                background-image: url('homePageBackground.jpg');
                height: 800px;
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: center;
                background-size: contain;
                text-align: center;
                opacity: 0.4;
                float:center;

            }
            .myText{
                    text-align: center;
                    opacity:1.0;
                    float:center;
            }

        </style>

然后:

    <div class="container">
      <div class="jumbotron mechBackground" >
        <div class="myText">
            <h1>Some Text</h1>
            <h3>Some more text</h3>
            <br><br>

        </div>
      </div>

我的问题是，这会更改所有内容的背景颜色，包括将 div 更改为海军蓝。相反，我希望你在 div 后面看到的是海军蓝(所以在这种情况下有一个居中的 div，我希望它在 div 后面的左边和右边是海军蓝)，然后 div 只是完全没有颜色。

我认为它会自动以这种方式工作，但我想不会吧？

Answer 1

默认情况下，div 没有设置背景色，因此它们是透明的。您需要为 mechBackground 设置背景颜色。

.mechBackground {
  background-color:#fff;
}