Question

我一直在尝试在CSS中的body标签中添加背景图片，但它无效。我添加了main.css样式表。我不知道我哪里出错了;这可能是一个愚蠢的错误，但我找不到它。请帮忙！

.nav-pills {
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  padding-top: 20px;
}

body {
  background-image: url("\images\1.jpg");
}

<!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>Portfolio</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>
  <div class="container-fluid">
    <ul class="nav nav-pills">
      <li class="pull-right">
        <a href="#">CONTACT ME</a>
      </li>
      <li class="pull-right">
        <a href="#">SKILLS</a>
      </li>
      <li class="pull-right">
        <a href="#">ABOUT ME</a>
      </li>
    </ul>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

Answer 1

在CSS中，您使用反斜杠而不是URL的正斜杠。它应该是：

body {
  background-image: url("/images/1.jpg");
}

完整代码：

＆＃13;

.nav-pills {
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  padding-top: 20px;
}

body {                                    /* (Fallback for Demo Purposes) */
  background-image: url("/images/1.jpg"), url(http://placehold.it/100/100/);
}

＆＃13;

<!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>Portfolio</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>
  <div class="container-fluid">
    <ul class="nav nav-pills">
      <li class="pull-right">
        <a href="#">CONTACT ME</a>
      </li>
      <li class="pull-right">
        <a href="#">SKILLS</a>
      </li>
      <li class="pull-right">
        <a href="#">ABOUT ME</a>
      </li>
    </ul>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

＆＃13;

Answer 2

我现在无法发表评论这就是为什么写作答案，

你正在给背景图像，首先检查什么是图像尺寸然后尝试在css中给出宽度和高度像：

body{
      background-image: url("\images\1.jpg");
      width: 100%;
      height: 100%;
    }

Answer 3

首先尝试从console-element检查您的图像是否正在获取正确的URL。

从那里你应该先验证
而不是“\”使用“/”或者可以使用完整网址
```
body {
  background-image: url("/images/1.jpg");
}
```

OR

body {
      background-image: url("www.example.com/images/1.jpg");
    }

`background-image`无法渲染``

3 个答案:

完整代码：