为什么我的背景颜色在 Chrome 中不起作用？
[英]Why is my background-color not working in Chrome?
问题描述
The background-color CSS property in Chrome is not working when I implement it into the body.
当我将 Chrome 中的background-color CSS 属性实现到正文中时，它不起作用。 However, when I test it in CodePen, the body's background color changes accordingly.但是，当我在 CodePen 中对其进行测试时，主体的背景颜色会相应地发生变化。 Here is the link to the CodePen code: https://codepen.io/Ag_Yog/pen/rzezYw .这是 CodePen 代码的链接： https ://codepen.io/Ag_Yog/pen/rzezYw。
Here is the code that does not work in notepad:这是在记事本中不起作用的代码：
HTML: HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
CSS: CSS：
html, body {
width: 100%;
height: 100%;
background-color: #00e676 ;
}
.quoteCard{
background-color: #fff176;
}
.text{
position: relative;
vertical-align:middle;
font-family: 'Acme', sans-serif;
font-size: 30px;
padding: 20px 20px 20px 20px;
}
When inspecting the code on Google Chrome, it shows that there is no background-color, even though I specified it in the CSS:在 Google Chrome 上检查代码时，它显示没有背景颜色，即使我在 CSS 中指定了它：
3 个解决方案
解决方案1
3 已采纳 2017-07-31 22:29:36
Bootstrap's background color is overwriting your main.css so the background-color property is taken from the bootstrap css file. Bootstrap的背景颜色覆盖了main.css，因此background-color属性取自bootstrap css文件。 Change the order of your css files. 更改css文件的顺序。
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
</html>
This will work 这会奏效
解决方案2
0 2017-08-10 13:23:49
On codepen the body is already responsive, whereas your Chrome's page needs to be made responsive to react to the % of your CSS Properties. 在codepen上，正文已经响应，而Chrome的页面需要响应以响应CSS属性的% 。
Add these meta tags- 添加这些元标记 -
<head> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <meta name="viewport"content="height=device-height, initial-scale=1.0"> </head>
Now your webpage can detect the devices width and height and set the style attributes according to them. 现在，您的网页可以检测设备的宽度和高度，并根据它们设置样式属性。
However, if this still doesn't work. 但是，如果这仍然不起作用。 Change your height properties value from 100% to something specific with px or use em if you want it to be responsive with different devices DPR. 使用px将height属性值从100%更改为特定的值，或者如果您希望它对不同的设备DPR进行响应，请使用em 。
解决方案3
0 2021-10-25 10:24:23
I found I was having the same issue when using all of the CSS code for the body tag.我发现在将所有 CSS 代码用于 body 标记时遇到了同样的问题。 I removed the background-color tag from that grouping and put it into a separate grouping for the same tag and everything worked as intended.我从该分组中删除了背景颜色标签，并将其放入同一标签的单独分组中，一切都按预期工作。 It's an organizational problem, but it is functional.这是一个组织问题，但它是功能性的。 Here's the example from my code (This is in my main.css file):这是我的代码中的示例（在我的 main.css 文件中）：
<style>
body {
font-family: Trebuchet MS;
margin-left: autopx;
margin-right: autopx;
margin-bottom: autopx;
margin-top: autopx;
}
body {background-color: #242424;}
</style>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.