背景图像在 div 元素中不起作用答案

【问题标题】：background-image don't work in div element背景图像在 div 元素中不起作用
【发布时间】：2016-06-21 00:01:18
【问题描述】：

不要在带有类 nav-item 的 div 中使用背景图像。所有图像都在同一个目录中。标头作品的背景。使用 img src 一切都很好。问题出在哪里？

我什么都试过了。

header {
    background: url('backSmall2.png');
    height: 670px;
}
 
img {
    width: 14%;
    transform:skewY(-1deg);
    margin-top: 40px;
    margin-left: 40px;
    box-shadow:  0 0 10px rgba(0,0,0,0.5);
    transform: rotate(-3deg);
}
 
.nav-item {
    width: 12%;
    background-image: url('frame.png');
    margin-top: 80px;
    margin-left: 140px;
}
 
.logo-contacts {
    background-image: url('frame.png');
}
 
.contacts {
    width: 100%;
    height: 300px;
    background-color: aqua;
}

<!DOCTYPE html>
<html>
    <head>
    <link href="normalize.css" rel='stylesheet'>
    <link href="index-style.css" rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <script src="jquery-2.2.1.js"></script>
    </head>
    <body>
        <header>
            <img src="logo1.png">
            <div class="nav-item"></div>
            <a href="#contacts" class="logo-contacts"> </a>
        </header>
        <a name="contacts">
            <div class="contacts">
            </div>
        </a>
    </body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

问题是你的div 是空的 - 所以 - 它没有高度。尝试为 CSS 类添加高度：

.nav-item {
    width: 12%;
    background-image: url('frame.png');
    margin-top: 80px;
    margin-left: 140px;
    height: XXXpx;
}

【讨论】：

【解决方案2】：

您应该向您的background-image 提供有关职位的更多信息。

例如：

.nav-item {
    width: 12%;
    background-image: url('frame.png');
    background-position: center; /* Added */
    background-size: cover; /* Added */
    background-repeat: no-repeat; /* Added */
    margin-top: 80px;
    margin-left: 140px;
}

在Mozilla Developer Network 上阅读有关background 属性的更多信息。

【讨论】：

【解决方案3】：

   <!-- language: lang-css -->

    header {
       background: url('backSmall2.png');
       height: 670px;
   }

  img {
       width: 14%;
      transform:skewY(-1deg);
       margin-top: 40px;
       margin-left: 40px;
       box-shadow:  0 0 10px rgba(0,0,0,0.5);
       transform: rotate(-3deg);
    }

   .nav-item {
       width: 600px;
      height:600px;
    background-image: url('frame.png');
    margin-top: 80px;
    margin-left: 140px;
}

.logo-contacts {
    background-image: url('frame.png');
}

.contacts {
    width: 100%;
    height: 300px;
    background-color: aqua;
}

<!DOCTYPE html>
<html>
    <head>
    <link href="normalize.css" rel='stylesheet'>
    <link href="index-style.css" rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <script src="jquery-2.2.1.js"></script>
    </head>
    <body>
        <header>
            <img src="logo1.png">
            <div class="nav-item"></div>
            <a href="#contacts" class="logo-contacts"> </a>
        </header>
        <a name="contacts">
            <div class="contacts">
            </div>
        </a>
    </body>
</html>

【讨论】：