必胜客标志的背景图像没有显示



我试着在导航栏的中央显示一个必胜客的标志,但图像没有显示,你能帮忙吗。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
header{
margin:auto;
text-align:center;
}
li   {
display: inline-block;
list-style-type: none;
margin: 20px;
}
header nav ul li .logo a{
text-indent: -9999999px;
background-image:url("https://media.cnn.com/api/v1/images/stellar/prod/190625084159- 
20190625-pizza-hut-logo-new.jpg?q=x_3,y_0,h_1684,w_2993,c_crop/h_270,w_480");
}  
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li class="logo">
<a href="index.html">pizza hut logo</a>
</li>
<li>About</li>
<li>Location</li>
</ul>
</nav>
</header>
<section>
<div>a</div>
<div>b</div>
<div>c</div>
</section>
<footer></footer>
<script src="script.js"></script>
</body>
</html>

我已经试着调试了一段时间,但仍然找不到答案。

您的CSS选择器错误。此:

header nav ul li .logo a

应该是这样的:

header nav ul li.logo a

通过在li.logo之间有空格,您实际上是在寻找类为logoli的子级。您实际想要的是li元素,它们本身具有类logo,即li.logo

我会在logo上设置background-image,并可以使用相对定位将其放置在您想要的位置。此外,我将您的li.logo设置为具有margin: 0;。最后,ul元素在1em的块开始和块结束处具有默认边距。所以我将您的ul设置为margin: 0;,这样它就不会出现偏移。请参阅我在下面所做的CSS更改。

header{
margin:auto;
text-align:center;
}
li   {
display: inline-block;
list-style-type: none;
margin: 20px;
}
.logo {
background-image: url('https://media.cnn.com/api/v1/images/stellar/prod/190625084159-20190625-pizza-hut-logo-new.jpg?q=x_3,y_0,h_1684,w_2993,c_crop/h_270,w_480');
background-position: cover;
background-size: contain;
background-repeat: no-repeat;
width: 100px;
height: 67px;
position: relative;
top: 30px;
margin: 0;
}
ul {
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li class="logo">
<a href="index.html"></a>
</li>
<li>About</li>
<li>Location</li>
</ul>
</nav>
</header>
<section>
<div>a</div>
<div>b</div>
<div>c</div>
</section>
<footer></footer>
<script src="script.js"></script>
</body>
</html>

最新更新