background-color不适用于我的页面
[英]background-color doesn't apply to my page
问题描述
After styling my css I wanted to add a red background. 
在设计我的CSS后，我想添加一个红色背景。 Problem is when I add the css to my body it doesn't apply to my page. 问题是当我将css添加到我的身体时，它不适用于我的页面。
Could you tell me what's wrong and why? 你能告诉我什么是错的，为什么？
You can find my code here: https://codepen.io/jardi/pen/RGNZJV 你可以在这里找到我的代码： https ： //codepen.io/jardi/pen/RGNZJV
body {
background-color:red;
}
#pageTitle {
text-align:center;
font-family:Monospace;
color: rgb(51,22,225);
padding:50px;
font-size:30px;
}
.paraGraphs {
font-size:20px;
font-family:Times New Roman;
margin-left:50px;
margin-right:50px;
text-align:justify;
}
#bottom-image{
display: block;
margin: 0 auto;
}
5 个解决方案
解决方案1
0 2016-09-06 17:23:46
Codepen has a scaffolding css with that Bootstrap so it has a bg color of white ...If you do it out of this you will see it and you can doublecheck in codepen by just doing this: Codepen有一个带有Bootstrap的脚手架css，所以它有一个白色的bg颜色...如果你这样做你会看到它，你可以通过这样做来双重检查codepen：
body {
background-color: red !important;
}
But you wont need that !important 但你不需要那个！重要的
UPDATE UPDATE
TO bypass your Bootstrap body bg just add a css file after that OR add inline like so: 绕过你的Bootstrap主体bg之后只需添加一个css文件或者像这样添加内联：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="/css/yourfile.css" rel="stylesheet" />
<style>
body {
background-color:red;
}</style>
</head>
解决方案2
0 2016-09-06 17:24:50
You have re-defined background-color for the body after that background-color: red; 你已经在背景颜色后为身体重新定义了背景background-color: red; , so add !important, so it can not be overriden: ，所以添加！important，所以无法覆盖：
background-color: red!important;
解决方案3
0 2016-09-06 17:25:31
I could solve it by using html body instead of body: 我可以通过使用html body而不是body来解决它：
html body {
background-color:red;
}
解决方案4
0 已采纳 2016-09-06 17:28:51
In your jsFiddle, the background color is being overridden by the jsFiddle scaffolding here: 在你的jsFiddle中，背景颜色被jsFiddle脚手架覆盖：
body {
background-color: #FFEEEE;
color: #004;
font-family: 'Roboto', sans-serif;
}
To test, you can add a !important to your CSS property value like this: 要进行测试，您可以在CSS属性值中添加！important，如下所示：
body {
background-color:red !important; /* Prototype code only, !important bad */
}
Outside of the jsFiddle, it's almost sure that something else is overriding your body background color (we can't see what). 在jsFiddle之外，几乎可以肯定其他东西会覆盖你的身体背景颜色（我们看不到什么）。 To find out, examine the "computed" CSS for the body element in browser dev tools, to see what. 为了找到答案，请检查浏览器开发工具中body元素的“计算”CSS，看看是什么。
Reference: Chrome Developer Tools: How to find out what is overriding a CSS rule? 参考： Chrome开发者工具：如何找出覆盖CSS规则的内容？
Once you see what CSS rule is overriding your background, either remove the offending code, or make sure your selector has more specificity, for example my adding a class: 一旦你看到什么CSS规则覆盖你的背景，要么删除有问题的代码，要么确保你的选择器具有更多的特异性，例如我添加一个类：
body.myClass {
background-color:red;
}
解决方案5
0 2016-09-06 17:29:26
According to the link that you attached, your code is using an external CSS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 根据您附加的链接，您的代码使用外部CSS： https ： //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
And inside this CSS already have an rule for body... 在这个CSS内部已经有了一个规则...
If you want, just add "!important" in the end of the line to force your color, example: 如果你愿意，只需在行的末尾添加“！important”来强制你的颜色，例如：
body {
background-color:red !important;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.