html - 为什么背景图片不显示？（CSS） - Thinbug

为什么背景图片不显示？（CSS）

时间：2019-09-17 16:36:09

标签： html css

我有一个导航栏，但是我想要一个背景图像来填充页面的其余部分，因此我尝试执行此操作以及许多其他操作，但是我无法使其正常工作。

我一直在尝试在本网站上找到的其他解决方案，例如尝试使用URL图像而不是本地图像，将背景色也不能使用。这是我的代码。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: white;
  font-family: 'Poppins', sans-serif;
}

body {
  border-left: 2vh solid white;
  border-right: 2vh solid white;
  border-bottom: 2vh solid white;
}

.Logo {
  color: black;
}

.nav_links {
  display: flex;
  width: 30%;
  justify-content: space-around;
}

.nav_links a {
  color: black;
  text-decoration: none;
}

.nav_links a:hover {
  color: grey;
}

.nav_links li {
  list-style: none;
}

.content {
  background-image: url(https://static6.depositphotos.com/1000747/604/v/950/depositphotos_6049093-stock-illustration-baker-illustration.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<nav>
  <div class="Logo">
    <h4>El Pan de Antes</h4>
  </div>
  <ul class="nav_links">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nuestros Productos</a></li>
    <li><a href="#">Sobre Nosotros</a></li>
  </ul>
</nav>

<div class="content">

</div>

2 个答案:

答案 0 :(得分：0)

当类别为“ content”的div为空时，它没有高度（或者它的高度= 0），因此可以正确设置背景，但是没有空间可以显示。顺便说一句。您可能想在html标签上设置背景。

答案 1 :(得分：0)

您的内容部分为空，我只是将其更改为body标签，并且为了清楚起见，它的工作方式也删除了边框，再次添加它就可以了

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: white;
    font-family: 'Poppins', sans-serif;
}

body{
    /*border-left: 2vh solid white;
    border-right: 2vh solid white;
    border-bottom: 2vh solid white;*/
}

.Logo{
    color: black;
}

.nav_links{
    display: flex;
    width: 30%;
    justify-content: space-around;
}

.nav_links a {
    color: black;
    text-decoration: none;
}

.nav_links a:hover{
    color: grey;
}

.nav_links li{
    list-style: none;
}

body {
    background-image: url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <link rel="stylesheet" href="styles.css">
        <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    </head>
    <body>
        <nav>
            <div class="Logo">
                <h4>El Pan de Antes</h4>
            </div>
            <ul class="nav_links">
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Nuestros Productos</a></li>
                <li><a href="#">Sobre Nosotros</a></li>
            </ul>
        </nav>

        <div class="content">
sdsads
dasdsa
asdas
        </div>
    </body>
</html>