css中的图片不显示为什么?

问题描述 投票:0回答:1

我使用 css 和 html 在我的网站标题中放置了背景图像,但图像没有显示。图像的位置被图像占据,但图像本身没有出现在那里。

当我通过 chrome 检查工具检查页面时,它说这样的文件不存在,但我确信我输入了正确的文件路径,我不知道现在该怎么办。请帮忙。这是图像所在的文件顺序image

图片应该显示在“David Chu's Restaurant”左边的空位how the website looks like atm

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;
}
html css image path background-image
1个回答
0
投票

你应该解决的事情:

  1. 图像中没有结束标签:
    <img src="">
  2. 没有 src,并且在代码中的其他地方没有提到。还不如删了

要解决此问题,请将背景替换为:

background-image: url("images/resturant-logo_large.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover; 

如果这些不起作用,请检查图像是否存在。 或者从背景中删除不重复

© www.soinside.com 2019 - 2024. All rights reserved.