为什么我的背景颜色在 Chrome 中不起作用？
Phi*_*eas 2 html css google-chrome twitter-bootstrap
当我将 Chrome 中的CSSbackground-color属性实现到正文中时，它不起作用。然而，当我在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 中指定了它：
Bootstrap 的背景颜色会覆盖您的 main.css，因此背景颜色属性是从 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>
这会起作用
| 归档时间： |
|
| 查看次数： |
12567 次 |
| 最近记录： |