html - html背景颜色不会改变

问题描述

我正在尝试更改某个页面的背景颜色。我尝试将 HTML 设置为背景颜色，重要的是！，但它仍然不起作用。也不设置 * 的背景颜色。

页面底部看起来像这样，它是我想要修复的。我认为这是因为我在最后一个容器中添加了一个边距底部，但我需要它。谢谢您的帮助！

另外，似乎在其他页面上也有这个问题。

.bods {
  background-color: #555B6E !important;
  font-family: orpheuspro, serif;
  font-style: normal;
}

.container-1 {
  border-radius: 20px;
  background-color: #50354d!important;
  max-width: 700px;
  min-height: 500px;
  margin-bottom: 30px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 120px 75px 0px 50px;
}

.container-2 {
  border-radius: 20px;
  background-color: #50354d!important;
  max-width: 700px;
  min-height: 500px;
  margin-top: 132px;
  margin-left: auto;
  margin-right: auto;
  padding: 120px 75px 0px 50px;
}

.container-3 {
  border-radius: 20px;
  background-color: #50354d!important;
  max-width: 700px;
  min-height: 500px;
  margin-top: 132px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  padding: 120px 75px 0px 50px;
}

.paragraph-1 {
  margin-top: 40px;
  margin-bottom: 0px;
  color: whitesmoke;
  text-align: center;
}

.heading {
  text-transform: uppercase;
  margin-top: 100px;
  text-align: center;
  color: whitesmoke;
}

.paragraph-2 {
  margin-top: 40px;
  color: whitesmoke;
  text-align: center;
}

.paragraph-3 {
  margin-top: 40px;
  color: whitesmoke;
  text-align: center;
}


/* .nav-grid {
    display: -ms-grid;
    display: grid;
    width: 100%;
    margin: 0px;
    padding: 0px;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -ms-flex-pack: start;
    -webkit-box-align: center;
    align-items:center;
    grid-auto-flow: row;
    grid-auto-columns: max-content;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    -ms-grid-rows: auto;
    grid-template-rows: auto;


} */


/* @media screen and (max-width: 479px){

} */

div.card-body.shadow.p-3.mb-5.rounded {
  border-radius: 50px !important;
  background-color: #CBC0D3 !important;
  max-width: 700px;
  min-height: 500px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  padding: 120px 75px 0px 50px;
}

h1 {
  background-color: #9b62b1 !important;
}

p {
  background-color: #9b62b1 !important;
}

<html>
<body class="bods">
  <br>
  <br>

  <br>

  <div class="card-body shadow p-3 mb-5 rounded">
    <h1 class="heading">
      Heading 1
    </h1>
    <p class="paragraph-1">Text 1</p>
  </div>


  <div class="card-body shadow p-3 mb-5 rounded">
    <h1 class="heading">
      Heading 2
    </h1>
    <p class="paragraph-2">Text 2</p>
  </div>


  <div class="card-body shadow p-3 mb-5 rounded">
    <h1 class="heading">
      Heading 3
    </h1>
    <p class="paragraph-3">Text 3</p>
  </div>
</body>
</html>

标签： htmlcssangularjsbackground-colorstyling

html - html背景颜色不会改变

问题描述

解决方案

推荐阅读