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

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

html css twitter-bootstrap google-chrome

Html 为什么我的背景色在Chrome中不起作用？,html,css,twitter-bootstrap,google-chrome,Html,Css,Twitter Bootstrap,Google Chrome,当我将Chrome中的background colorCSS属性实现到body中时，它不起作用。然而，当我在CodePen中测试它时，身体的背景颜色会相应地改变。以下是指向代码笔代码的链接：以下是在记事本中不起作用的代码： HTML: Txt 获取新报价 CSS: html，正文{ 宽度：100%；身高：100%；背景色：#00e676； } .quoteCard{ 背景色：#fff176； } .文本{ 位置：相对位置；垂直对齐：中间对齐；字体系列：“Acme”，无衬线；字体

当我将Chrome中的

background color

CSS属性实现到body中时，它不起作用。然而，当我在CodePen中测试它时，身体的背景颜色会相应地改变。以下是指向代码笔代码的链接：

以下是在记事本中不起作用的代码：

HTML:


Txt
获取新报价

CSS:

html，正文{
宽度：100%；
身高：100%；
背景色：#00e676；
}
.quoteCard{
背景色：#fff176；
}
.文本{
位置：相对位置；
垂直对齐：中间对齐；
字体系列：“Acme”，无衬线；
字体大小：30px；
填充：20px 20px 20px 20px；
}

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

引导的背景色将覆盖main.css，因此背景色属性取自引导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>


Txt
获取新报价

这将起作用

引导的背景色将覆盖main.css，因此背景色属性取自引导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>


Txt
获取新报价

这将在codepen上起作用，因为主体已经响应了，而Chrome的页面需要响应CSS属性的

添加这些元标记-

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

但是，如果这仍然不起作用。将您的

height

属性值从

100%

更改为

px

的特定值，或者使用

em

，如果您想让它对不同的设备DPR做出响应。

在codepen上，主体已经有响应，而Chrome的页面需要对CSS属性的

做出响应

添加这些元标记-

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

但是，如果这仍然不起作用。将

height

属性值从

100%

更改为使用

px

指定的值，或者使用

em

来响应不同设备的DPR。

您使用哪个扩展名保存此代码。html？当您检查元素

主体

时，是否看到

背景色

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

主体

时，是否看到

背景色