html背景顏色不會改變
[英]html background color wont change
問題描述
我正在嘗試更改某個頁面的背景顏色。 我嘗試將 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>
2 個解決方案
解決方案1
1 2020-10-08 02:37:24
請讓我更多地了解您的問題。
html 中不存在類“container-1、container-2、container-3”。 其他類我可以更改背景顏色。
解決方案2
0 2020-10-08 03:06:46
問題是主體中有一個.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>
document.getElementById不會給我“樣式”來更改背景顏色
[英]document.getElementById wont give me “style” to change background color
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.