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

Question

当我将 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;
}

在 Google Chrome 上检查代码时，它显示没有背景颜色，即使我在 CSS 中指定了它：

Answer 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>

这会奏效

Answer 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>

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

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

Answer 3

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

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

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-07-31 22:29:36

解决方案2
0 2017-08-10 13:23:49

解决方案3
0 2021-10-25 10:24:23

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

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-07-31 22:29:36

解决方案2 0 2017-08-10 13:23:49

解决方案3 0 2021-10-25 10:24:23

解决方案1
3 已采纳 2017-07-31 22:29:36

解决方案2
0 2017-08-10 13:23:49

解决方案3
0 2021-10-25 10:24:23