在报价生成器网站上工作。我添加了 Bootstrap ，在 css 代码中，我有一部分将 HTML 元素的背景颜色设置为蓝绿色混合阴影。 bootstrap 只是决定覆盖 CSS 代码，并将页面中包含内容背景颜色的部分设置为白色。为什么以及如何将我的背景颜色保持为我想要的颜色
var quotes = [
[
"To be prepared for war is one of the most effectual means of preserving peace.",
"George Washington"
],
[
"One man with courage is a majority.",
"Thomas Jefferson"
],
[
"National honor is a national property of the highest value.",
"James Monroe"
],
[
"The only thing we have to fear is fear itself.",
"Theodore D. Roosevelt"
],
[
"Ask not what your country can do for you, but what you can do for your country.",
"John F. Kennedy"
]
];
var currentQuote = 0;
function showNewQuote() {
if (currentQuote >= 5) {
currentQuote = 0;
}
var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
document.getElementById("paragraph").innerHTML = Quote[1];
currentQuote++;
}html {
background-color: #33cccc;
}
#header, #paragraph {
font-family: sans-serif;
}
#header {
padding-top: 10%;
font-size: 60px;
}
#paragraph {
padding-left: 80%;
font-size: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Random Quote Generator</title>
<script src = "script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class = "container">
<h1 id="header">Click the button to generate a quote!</h1>
<p id="paragraph"></p>
<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
</div>
</body>
</html>最佳答案
选项 1:
确保您的 css 在 bootstrap.css 文件之后加载。
var quotes = [
[
"To be prepared for war is one of the most effectual means of preserving peace.",
"George Washington"
],
[
"One man with courage is a majority.",
"Thomas Jefferson"
],
[
"National honor is a national property of the highest value.",
"James Monroe"
],
[
"The only thing we have to fear is fear itself.",
"Theodore D. Roosevelt"
],
[
"Ask not what your country can do for you, but what you can do for your country.",
"John F. Kennedy"
]
];
var currentQuote = 0;
function showNewQuote() {
if (currentQuote >= 5) {
currentQuote = 0;
}
var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
document.getElementById("paragraph").innerHTML = Quote[1];
currentQuote++;
}<script src = "script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
background-color: #33cccc;
}
#header, #paragraph {
font-family: sans-serif;
}
#header {
padding-top: 10%;
font-size: 60px;
}
#paragraph {
padding-left: 80%;
font-size: 20px;
}
</style>
<body>
<div class = "container">
<h1 id="header">Click the button to generate a quote!</h1>
<p id="paragraph"></p>
<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
</div>
</body>
</html>选项 2:
使用 !important 关键字:
var quotes = [
[
"To be prepared for war is one of the most effectual means of preserving peace.",
"George Washington"
],
[
"One man with courage is a majority.",
"Thomas Jefferson"
],
[
"National honor is a national property of the highest value.",
"James Monroe"
],
[
"The only thing we have to fear is fear itself.",
"Theodore D. Roosevelt"
],
[
"Ask not what your country can do for you, but what you can do for your country.",
"John F. Kennedy"
]
];
var currentQuote = 0;
function showNewQuote() {
if (currentQuote >= 5) {
currentQuote = 0;
}
var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
document.getElementById("paragraph").innerHTML = Quote[1];
currentQuote++;
}body {
background-color: #33cccc !important;
}
#header, #paragraph {
font-family: sans-serif;
}
#header {
padding-top: 10%;
font-size: 60px;
}
#paragraph {
padding-left: 80%;
font-size: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Random Quote Generator</title>
<script src = "script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class = "container">
<h1 id="header">Click the button to generate a quote!</h1>
<p id="paragraph"></p>
<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
</div>
</body>
</html>(请注意，我还在您的 css 中将 html 更改为 body)
关于html - Bootstrap 改变背景色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39319709/