我使用 css 和 html 在我的网站标题中放置了背景图像,但图像没有显示。图像的位置被图像占据,但图像本身没有出现在那里。
当我通过 chrome 检查工具检查页面时,它说这样的文件不存在,但我确信我输入了正确的文件路径,我不知道现在该怎么办。请帮忙。这是图像所在的文件顺序
图片应该显示在“David Chu's Restaurant”左边的空位
HTML 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Chu's China Bistro</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen&family=Salsa&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class= "navbar-header">
<a href="index.html" class=" pull-left">
<div id="logo-img"> <img src=""></div>
</a>
<a class="navbar-brand" href="index.html"><h1> David Chu's China Bistro</h1>
<img alt="Brand">
</a>
</div>
</div>
</nav>
</header>
CSS 代码
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
font-family: 'Salsa', cursive;
}
#header-nav{
background-color: #f6b319;
border-radius:0;
border: 0;
}
#logo-img {
background: url('images/resturant-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
.navbar-brand{
padding: 0px;
margin: 0;
}
你应该解决的事情:
<img src="">
要解决此问题,请将背景替换为:
background-image: url("images/resturant-logo_large.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
如果这些不起作用,请检查图像是否存在。 或者从背景中删除不重复