Question

我正在尝试将一个背景图像添加到div，它将从外部样式表中提取，但未能这样做。请告诉我该怎么做。

＆＃13;

.header {
  height: 278px;
  width: 100%;
  display: inline-block;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

.navbar-custom {
  margin: 45px;
}

.color {
  background-color: #7b97ac;
}

.nav {
  font-size: 25px;
}

.nav li a {
  color: #000;
}

.nav li a:hover {
  color: #E50894;
}

.nav .active a {
  color: #E50894;
}

.back {
  background-image: url(../img/home.jpg);
}

＆＃13;

<!DOCTYPE html>
<html>

<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>Themida Home</title>

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">

  <script src="js/jquery-3.1.0.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="header">
      <img src="img/Themida_logo.png" class="center">



      <nav class="navbar navbar-custom center">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
					<span class="icon-bar color"></span>
					<span class="icon-bar color"></span>
					<span class="icon-bar color"></span>
				</button>
        </div>

        <div class="collapse navbar-collapse" id="mynavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">HOME</a></li>
            <li><a href="About Us.html">ABOUT US</a></li>
            <li><a href="services.html">SERVICES</a></li>
            <li><a href="#">CONTACT US</a></li>
            <li><a href="#">LINKS</a></li>
          </ul>

        </div>

      </nav>
    </div>

    <div class="back">

    </div>

  </div>

</body>

</html>

＆＃13;

![This is the image i want to use as background ] 1

请帮帮我。

Answer 1

您需要编辑CSS文件中的.back类并添加以下内容：

.back {
background-image: url('https://i.stack.imgur.com/Dg4go.jpg');
background-size: cover;
width:600px; /* this can be adjusted to your taste*/
height:200px; /* this can be adjusted to your taste*/
}

在HTML文件中，您需要添加内容才能正确查看图像，例如

<div class="back">
<br><br><hr><br> <!-- add as many as you can for test purposes -->
</div>

根据您要添加到div的内容类型，CSS中的width和height属性可能需要进行调整，甚至删除。祝你好运。

Answer 2

div没有尺寸（高度，宽度），因此背景图像不会显示。如果图像是IMG标记，它只会自动显示图像

Answer 3

您只需要添加height / width，这样就可以看到background-image，因为它没有任何孩子

.back {
  background-image: url(https://i.stack.imgur.com/Dg4go.jpg);
  background-size: cover;
  height: 300px;
  width: 500px;
}

<div class="back">

</div>

如果添加一些内容，则可以在不添加宽度或高度的情况下查看图像

.back {
  background-image: url(https://i.stack.imgur.com/Dg4go.jpg);
  background-size: cover;
}

<div class="back">
  <br/><br/><br/><br/><br/><br/><br/>
</div>

如何使用外部样式表将背景图像设置为特定div？

3 个答案: