Html CSS背景图像不显示_Html_Css

Html CSS背景图像不显示

html css

Html CSS背景图像不显示,html,css,Html,Css,当我试图通过CSS在div中放置背景图像时，没有显示任何内容。我尝试过添加位置、宽度、高度等属性。而且，我还可以通过CSS将照片放置在标签中。但是，很明显，我不想把它留在那里。这是我的html： <!DOCTYPE html/> <html> <head> <link type="text/css" rel="stylesheet" href="main.css"/> <title> Lov

当我试图通过CSS在div中放置背景图像时，没有显示任何内容。我尝试过添加位置、宽度、高度等属性。而且，我还可以通过CSS将照片放置在

标签中。但是，很明显，我不想把它留在那里。这是我的html：

    <!DOCTYPE html/>
<html>

  <head>

    <link type="text/css" rel="stylesheet" href="main.css"/>

    <title>
      Lovers &amp; Fighters
    </title>
  </head>
  <body>
      <div id="photo">
      </div>
      <nav>
        <ul id="main">
          <li>Menu</li>
          <li>About</li>
          <li>Music</li>
          <li>Videos</li>
          <li>Photos</li>
          <li>Contact</li>
        </ul>
        <ul id="social">
          <li>
            <img/>
          </li>
          <li>
            <img/>
          </li>
        </ul>

    </body>
  </html>

div照片不包含任何内容，请尝试添加

#photo{
    background-image: url('../images/bandbanner.png');
    width: 100%
    padding : 100px;
    //hopefully this will make the photo appear and you can go from there
}

设置

#photo

的高度和宽度属性

参见工作示例：

设置

高度和宽度
width: px;
height: px;

HTML：
<!DOCTYPE html/>
<html>

  <head>

    <link type="text/css" rel="stylesheet" href="main.css"/>

    <title>
      Lovers &amp; Fighters
    </title>
  </head>
  <body>
      <div class="photo">
      <nav>
        <ul id="main">
          <li>Menu</li>
          <li>About</li>
          <li>Music</li>
          <li>Videos</li>
          <li>Photos</li>
          <li>Contact</li>
        </ul>
      </nav>
        <ul id="social">
          <li>
            <img/>
          </li>
          <li>
            <img/>
          </li>
        </ul>
    </div>
    </body>
  </html>

您是否尝试过通过控制台进行调试？到图像的路径正确吗？#photo div有高度和宽度吗？
标签是关于什么的？没有关闭标签。而您的照片div
是一个空容器px
不是height
或width
的有效值，但带有数字的值（如100px
）将是无效的。您还可以使用百分比（%
）或em；阅读更多内容。我故意将该值留空，以便OP可以根据自己的需要进行调整并调整大小。我假设是这样的，但我想为OP澄清一下，以防OP不知道语法。
#photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}

width: px;
height: px;

<!DOCTYPE html/>
<html>

  <head>

    <link type="text/css" rel="stylesheet" href="main.css"/>

    <title>
      Lovers &amp; Fighters
    </title>
  </head>
  <body>
      <div class="photo">
      <nav>
        <ul id="main">
          <li>Menu</li>
          <li>About</li>
          <li>Music</li>
          <li>Videos</li>
          <li>Photos</li>
          <li>Contact</li>
        </ul>
      </nav>
        <ul id="social">
          <li>
            <img/>
          </li>
          <li>
            <img/>
          </li>
        </ul>
    </div>
    </body>
  </html>

.photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}