Question

我有一个问题。我对编码很新，我正在尝试建立自己的网站。我想在我的网站上添加background image，但图片没有显示。我尝试了几件事，但没有运气。我添加了我在html文件中所做的代码。我希望有人可以帮助我，并指出我正确的方向。

这就是我的html文件：

<!DOCTYPE html>
<html>
<head>
     <link rel="stylesheet" type="text/css" href="./Lusofly virtual.css" />
     <title>Lusofly Virtual</title>
     <style type="text/css">
body {background-color:gray;}
#mydiv {
	background-image: url('https://i.stack.imgur.com/0Cbf1.png');height:200px;width:1200px;">
	background-repeat:no-repeat;
	background-size:contain;
	height:200px;width:1200px;
}
</style>
</head>
<body>
   
    <div class="header">
         
         <div class="container">
             
              <div class="logo">
                  <h1><a href="#">Lusofly Virtual</a></h1>
              </div>
             
              <div class="nav">
                <ul>
                  <li><a href="#">HOME</a></li>
                  <li><a href="#">COMMUNITY</a></li>
                  <li><a href="#">CONTACT</a></li>
                  <li><a href="#">PILOT AREA</a></li>
               </ul>
            </div> 
       </div>
  </div>
</body>
</html>

提前致谢

Answer 1

在将mydiv容器添加到您的html后，我可以看到正在显示background-image。另请为您的css代码中的background-image: url()提供正确的路径。

请参阅代码以获取更多信息：

＆＃13;

body {
  background-image: url('http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg');
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

<body>

  <div class="header">

    <div class="container">

      <div class="logo">
        <h1><a href="#">Lusofly Virtual</a></h1>
      </div>

      <div class="nav">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">COMMUNITY</a></li>
          <li><a href="#">CONTACT</a></li>
          <li><a href="#">PILOT AREA</a></li>
        </ul>
      </div>
      <div id="mydiv"></div>
    </div>
  </div>
</body>

＆＃13;

Answer 2

更新了你的CSS。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="./Lusofly virtual.css" />
  <title>Lusofly Virtual</title>
  <style type="text/css">
    body {
      background-color: gray;
    }
    
    .header {
      background-image: url('http://placehold.it/800x800.jpg');
      background-repeat: no-repeat;
      background-size: contain;
      height: 200px;
      width: 1200px;
    }
  </style>
</head>

<body>

  <div class="header">

    <div class="container">

      <div class="logo">
        <h1><a href="#">Lusofly Virtual</a></h1>
      </div>

      <div class="nav">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">COMMUNITY</a></li>
          <li><a href="#">CONTACT</a></li>
          <li><a href="#">PILOT AREA</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

Answer 3

在background Image

中提供body tag

以下是一个示例：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="./Lusofly virtual.css" />
  <title>Lusofly Virtual</title>
  <style type="text/css">
    body {
      background-color: gray;

      background-image: url('http://placehold.it/600x200.jpg');
      background-repeat: no-repeat;
      background-size: contain;
     
    }
    .header{ height:1000px} /* Demo height*/
  </style>
</head>

<body>

  <div class="header">

    <div class="container">

      <div class="logo">
        <h1><a href="#">Lusofly Virtual</a></h1>
      </div>

      <div class="nav">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">COMMUNITY</a></li>
          <li><a href="#">CONTACT</a></li>
          <li><a href="#">PILOT AREA</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

Answer 4

在CSS代码中，您将图像设置为ID为mydiv的HTML元素的背景，但HTML代码中没有此类元素。这就是为什么你的图像不可见的原因。

只需将<div id="mydiv"></div>添加到您的HTML代码中，您就会看到自己的图片：

＆＃13;

#mydiv {
    background-image: url('https://i.stack.imgur.com/0Cbf1.png');
    background-repeat:no-repeat;
    background-size:contain;
    height:200px;
    width:1200px;
}

＆＃13;

<div class="header">
    <div class="container">
        <div id="mydiv"></div>
        <div class="logo">
            <h1><a href="#">Lusofly Virtual</a></h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">COMMUNITY</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">PILOT AREA</a></li>
            </ul>
        </div> 
    </div>
</div>

＆＃13;

背景图像没有显示在浏览器中

4 个答案: