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>

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

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

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

2 个答案: