为什么我的背景颜色在 Chrome 中不起作用？答案

【问题标题】：Why is my background-color not working in Chrome?为什么我的背景颜色在 Chrome 中不起作用？
【发布时间】：2018-01-07 14:44:59
【问题描述】：

当我将 Chrome 中的 background-color CSS 属性实现到正文中时，它不起作用。但是，当我在 CodePen 中对其进行测试时，主体的背景颜色会相应地发生变化。这是 CodePen 代码的链接：https://codepen.io/Ag_Yog/pen/rzezYw。

以下是记事本中无法使用的代码：

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：

 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;
}

在谷歌浏览器上检查代码时，它显示没有背景颜色，即使我在 CSS 中指定了它：

【问题讨论】：

您使用哪个扩展名保存此代码？ .html?
当您检查元素body 时，您是否看到background-color 样式规则，如果是，它是否被另一个样式规则过度限定？
尝试硬刷新。 CTRL + F5
“在记事本中不起作用的代码”... 好的。您是否尝试交换 bootstrap.css 和 main.css ？
好吧，首先，将高度设置为 100% 不会使页面占视口的 100%。如果没有您的 html，我无法确定，但一种解决方案是使用“height:100vh;”。这将填满整个视口。

标签： html css twitter-bootstrap google-chrome

【解决方案1】：

Bootstrap 的背景颜色会覆盖您的 main.css，因此 background-color 属性取自 bootstrap css 文件。更改 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>

这会起作用

【讨论】：

【解决方案2】：

在 codepen 上，正文已经响应，而您的 Chrome 页面需要响应您的 CSS 属性的%。

添加这些元标记-

<head> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <meta name="viewport"content="height=device-height, initial-scale=1.0"> </head>

现在您的网页可以检测设备的宽度和高度，并根据它们设置样式属性。

但是，如果这仍然不起作用。将您的height 属性值从100% 更改为px 的特定值，或者如果您希望它能够响应不同的设备DPR，请使用em。

【讨论】：

【解决方案3】：

我发现在使用 body 标签的所有 CSS 代码时遇到了同样的问题。我从该分组中删除了背景颜色标签，并将其放入同一标签的单独分组中，一切都按预期工作。这是一个组织问题，但它是功能性的。这是我的代码中的示例（在我的 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>

【讨论】：