时间戳

首页 > 解决方案 > 为什么背景图像不显示？(CSS)

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>

标签： htmlcss

解决方案

您的内容部分是空的，我只是将其更改为 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>

推荐阅读