为啥我的背景颜色没有显示在 <p> 上？ [复制]
Posted
技术标签:
【中文标题】为啥我的背景颜色没有显示在 <p> 上？ [复制]【英文标题】：Why isn't my background color showing up on <p>? [duplicate]为什么我的背景颜色没有显示在 <p> 上？ [复制] 【发布时间】：2017-11-09 01:21:10 【问题描述】：我很困惑为什么这段代码没有显示背景颜色。 "1" 类上有填充，但即使指定了颜色，也没有颜色。在容器类中查找问题。
请帮忙。
body
margin: 0px;
background-color: #fff;
/*
font-family: 'Lato', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Gloria Hallelujah', cursive;
*/
.welcome
font-family: 'Gloria Hallelujah', sans-serif;
font-size: 45;
text-align: center;
color: #000;
.sub1
font-family: 'Lato', sans-serif;
font-size: 30;
color: #000;
text-indent: 20;
.sub2
font-family: 'Lato', sans-serif;
font-size: 25;
color: #000;
text-indent: 20;
.container
position: relative;
width: 100%;
height: 600px;
/*.container img
position: absolute;
width: 1800px;
background-size: cover;*/
@-webkit-keyframes xfade
0%
opacity: 1;
33%
opacity: 1;
44%
opacity: 0;
89%
opacity: 0;
100%
opacity: 1;
@keyframes xfade
0%
opacity: 1;
33%
opacity: 1;
44%
opacity: 0;
89%
opacity: 0;
100%
opacity: 1;
.container p:nth-child(3)
-webkit-animation: xfade 45s 0s infinite;
animation: xfade 45s 0s infinite;
.container p:nth-child(2)
-webkit-animation: xfade 45s 15s infinite;
animation: xfade 45s 15s infinite;
.container p:nth-child(1)
-webkit-animation: xfade 25s 30s infinite;
animation: xfade 25s 30s infinite;
.container
position: relative;
.container img
position: absolute;
.1
width: 100%;
height: 100%;
padding: 100px;
/*background-image: url(Pictures/cupcakes.jpg)*/
background-color: #00FFFF;
overflow: auto;
background-size: cover;
<html>
<head>
<title>JAM Bakery</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>
<body>
<br>
<div class="content">
<h1 class="welcome">Welcome to JAM Bakery!</h1>
<div class="slogan">
<h2 class="sub1">Creamy, Sweet, Toasted</h2>
<h2 class="sub2">Your Choice.</h2>
<div class="container">
<p class="1">1</p>
<p class="2"></p>
<p class="3"></p>
</div>
</div>
</div>
</body>
</html>请检查您可能遇到的任何其他问题。谢谢。
【问题讨论】：
【参考方案1】：“1”不是有效的 CSS 类。 CSS 类必须以字母、连字符或下划线开头。
有关详细信息，请参阅 this answer 或 the W3C spec document。
【讨论】：
【参考方案2】：CSS 类名不应为数字，应以字母或 -（连字符）或 _（下划线）开头
body
margin: 0px;
background-color: #fff;
/*
font-family: 'Lato', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Gloria Hallelujah', cursive;
*/
.welcome
font-family: 'Gloria Hallelujah', sans-serif;
font-size: 45;
text-align: center;
color: #000;
.sub1
font-family: 'Lato', sans-serif;
font-size: 30;
color: #000;
text-indent: 20;
.sub2
font-family: 'Lato', sans-serif;
font-size: 25;
color: #000;
text-indent: 20;
.container
position: relative;
width: 100%;
height: 600px;
/*.container img
position: absolute;
width: 1800px;
background-size: cover;*/
@-webkit-keyframes xfade
0%
opacity: 1;
33%
opacity: 1;
44%
opacity: 0;
89%
opacity: 0;
100%
opacity: 1;
@keyframes xfade
0%
opacity: 1;
33%
opacity: 1;
44%
opacity: 0;
89%
opacity: 0;
100%
opacity: 1;
.container p:nth-child(3)
-webkit-animation: xfade 45s 0s infinite;
animation: xfade 45s 0s infinite;
.container p:nth-child(2)
-webkit-animation: xfade 45s 15s infinite;
animation: xfade 45s 15s infinite;
.container p:nth-child(1)
-webkit-animation: xfade 25s 30s infinite;
animation: xfade 25s 30s infinite;
.container
position: relative;
.container img
position: absolute;
.t1
width: 100%;
height: 100%;
padding: 100px;
/*background-image: url(Pictures/cupcakes.jpg)*/
background-color: #00FFFF;
overflow: auto;
background-size: cover;
<html>
<head>
<title>JAM Bakery</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>
<body>
<br>
<div class="content">
<h1 class="welcome">Welcome to JAM Bakery!</h1>
<div class="slogan">
<h2 class="sub1">Creamy, Sweet, Toasted</h2>
<h2 class="sub2">Your Choice.</h2>
<div class="container">
<p class="t1">1</p>
<p class="t2"></p>
<p class="t3"></p>
</div>
</div>
</div>
</body>
</html>【讨论】：
以上是关于为啥我的背景颜色没有显示在 <p> 上？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章