Question

我正在使用HTML和CSS开发一个基本网站，我的背景图片不会显示在该部分中？有帮助吗？这是我的HTML文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Desc">
    <meta name="author" content="Lewis Beard">
    <META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">


    <title>Lewis Beard Lighting Design</title>
    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css" type="text/css">



</head>

<body id="page-top">

    <section id="title">
        <div class="container" >
            <p><center>LEWIS BEARD LIGHTING DESIGN</center></p>
        </div>
    </section>

    <div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>

    <section id="nav">
        <div class="container">
            <p><a class="page-scroll" href="#about">About</a> - <a class="page-scroll" href="#portfolio">Projects</a> - <a class="page-scroll" href="#design">Design</a> - <a class="page-scroll" href="#contact">Contact</a></p>
        </div>
    </section>

    <section id="about">
        <div class="container" style="text-align:center;">
            <h4>Design Differently</h4>
            <hr>
            <p></p>
        </div>
    </section>

    <section id="portfolio">
        <div class="container" style="text-align:center;">
            <h4>Projects</h4>
            <hr style="width:10%">
            <p></p>
        </div>
    </section>

    <section id="design">
        <div class="container" style="text-align:center;">
            <h4>Design Differently</h4>
            <hr>
            <table style="text-align:center;width:60%;margin-left:20%;">
                <tr><td><i class="fa fa-4x fa-arrows"></i></td><td><i class="fa fa-4x fa-lightbulb-o"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td></tr>
            </table>
        </div>
    </section>

    <section id="contact">
        <div class="container" style="text-align:center;">
            <p>Contact Lewis!</p>
        </div>
    </section>

    <section id="footer">
        <div class="container" >
            <div style="text-align:left">
                <p><br>Links Here</p>
            </div>
            <div style="text-align:right;">
                <p>COPYRIGHT LEWIS BEARD LIGHTING DESIGN 2016<br>ALL RIGHTS RESERVED</p>
            </div>
        </div>
    </section>

    <section id="designby">
        <div class="container" >
            <p><center>Designed By Code After Code</center></p>
        </div>
    </section>
</body>
</head>

这是我的CSS文件：

html,
body{
    height:100%;
}
body{
    font-family:Merriweather,'Helvetica Neue',Arial,sans-serif;
}
#title {
    height: 40px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left; 
    background: #fff;
}
header {
    height: 500px;
    background: url(blue.png) no-repeat center fixed; 
    background-size: cover;
}
#nav {
    height: 40px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left; 
    background: #808000;
}
#about {
    height: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left;
    color: #fff;
    background: #2d5f74;
    border-bottom:0px #fff solid;
}
#portfolio {
    height: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left;
    color: #2d5f74;
    background: #E7E5DF;
    border-bottom:100px #fff solid;
}
avo {
    height: 400px;
    background: url(avo.jpg) no-repeat center fixed; 
    background-size: cover;
}
#design {
    height: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left; 
    background: #E7E5DF;
}
#gallery {
    height: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left; 
    background: #808000;
}
#contact {
    height: 200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left; 
    background: #D3D0CB;
}
#social {
    height: 100px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left; 
    background: #fff;
}
#footer {
    height: 150px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left;
    color: #fff;
    background: #393E41;
}
#designby {
    height: 50px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px; 
    border: 0; 
    float: left;
    color: #fff;
    background: #808000;
}

图像与其余代码位于同一文件夹中，并且是标准图像 - 日志中没有控制台错误，因此我无法找到它是什么！任何帮助，将不胜感激！提前谢谢！

Answer 1

试试这个fiddle。

的CSS：

#header {
    height: 500px;
    background: url(http://p1.pichost.me/i/54/1774604.jpg) no-repeat center fixed; 
    background-size: cover;
}

Answer 2

目标：

<div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>

你之前需要＃：

header {
    height: 500px;
    background: url(blue.png) no-repeat center fixed; 
    background-size: cover;
}

给

#header {
    height: 500px;
    background: url(blue.png) no-repeat center fixed; 
    background-size: cover;
}

背景图像没有在CSS中显示

2 个答案: