HTML背景颜色不会改变

编程问答 2022-06-09

问题描述

我正在尝试更改特定页面的背景色。我尝试将HTML设置为具有重要意义的背景颜色，但是仍然无法正常工作。也不设置*的背景颜色。

页面底部看起来像这样，也是我要解决的问题。我认为这是因为我在最后一个容器中添加了margin-bottom，但是我需要它。感谢您的帮助！

ALSO，在其他页面上似乎也有此问题。

enter image description here

.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>

解决方法

请让我进一步了解您的问题。

html中不存在类“ container-1，container-2，container-3”。 其他班，我可以改变背景颜色。

enter image description here

,

问题在于主体中存在一个类.bods，它将覆盖您的body定义（类优先于简单元素）。

此外，.bods有一个!important，因此您将需要以下内容来覆盖它：

body.bods {
  background-color: red !important;
}

或如果可以访问文件，则更改.bods定义：

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


body.bods {
  background-color: red !important;
}

.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>

background-colorhtmlstyling