背景图像不会使用 HTML5 样板显示答案

【问题标题】：Background-image won't show using HTML5 boilerplate背景图像不会使用 HTML5 样板显示
【发布时间】：2014-09-12 20:52:03
【问题描述】：

我很难在 CSS 中显示我的背景图片。我创建了一个带有.top 类的 div，但是每次我使用 background-image css 属性时，除了颜色、高度和宽度之外，什么都没有显示。我也使用 Initializr 的HTML5 boilerplate。如果我想使用“

    <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>woods</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/style.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>

    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="wrap"> 
        <div class="wrap">
            <header>
                <h1>Woods</h1>
            </header>
        </div>


    <div class="top">

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam.</p>

        </div>

            <section>


                <article>


                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam.</p>
                </article>

                <article>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id dictum quam. </p>
                </article>

                <article>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id dictum quam. </p>
                </article>

                <article>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nunc, ornare feugiat pellentesque eget, luctus vitae mauris. Nam sit amet auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id dictum quam. </p>
                </article>

            </section>
        </div>


        <div class="wrap">
            <footer>
                <p>Copyright 2014. All rights reserved.</p>
            </footer>
        </div>

            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>

            <script src="js/main.js"></script>
        </body>
    </html>



        body {
        background-color: white;
        font-size: 62.5%;
        line-height: 1.5em;
    }

    header {
        width: 1024px;
        height: 150px;
        color: #222;
        margin: 0 auto;
        overflow: hidden;
        text-transform: uppercase;
        border-bottom: 1px solid black;
    }

    header > h1 {
        margin: 60px 0 0 0;
        text-align: center;
        font-size: 3.0em
    }

    .top {
        margin: 0 auto;
        background-image: url(.../img/forestlargeimage.jpg) no-repeat;
        background-color: pink;
        width: 1024px;
        height: 350px;


    }

    section {
        width: 1024px;
        height: auto;
        margin: 0 auto 40px auto;
        background-color: white;
        overflow: auto;
    }



    article {
        float: left;
        width: 472px;
        height: 450px;
        color: #333;
        margin: 45px 0 0 25px; 
    }

    article > h1 {
        margin: 15px 0 0 15px;
        font-size: 1.5em;
        color: #333;
        text-transform: uppercase;
        font-weight: 800;
    }

    article > p {
        margin: 15px 0 0 15px;
        font-size: 1.5em;
        line-height: 1.5em;
        color: #181919;

    }



    footer {
        width: 1024px;
        height: 50px;
        color: #fff;
        margin: 0 auto;
        margin-top: -50px;
        border-top: 1px solid #222;
        overflow: hidden;
        clear: both;

    }

    footer > p {
        margin: 15px 0 0 40px;
        font-size: 1.2em;
        color: #fff;
        overflow: hidden;
    }


    .wrap {
        width: 100%;
        background-color: #fff;
    }

    html, body {
        height: 100%;

    }

    #wrap {
        min-height: 100%;

    }

【问题讨论】：

你确定你的图片路径是正确的吗？您可以使用浏览器的“inspect”元素来检查图像是否正在加载。
我检查并显示一个错误，所以我取消了 no-repeat，没有关于背景图像的当前错误，但仍然不会显示。

标签： css background background-image html5boilerplate initializer

【解决方案1】：

在 background-image 规则中你不能写 repeat 属性。正确的解决方案就在这里，您可以选择长版或短版。还要检查图片路径是否为真。

.top {
        margin: 0 auto;
        background-image: url(.../img/forestlargeimage.jpg);
        background-repeat: no-repeat;
        background-color: pink;
        width: 1024px;
        height: 350px;


    }

或

.top {
            margin: 0 auto;
            background: pink url(.../img/forestlargeimage.jpg) no-repeat;
            width: 1024px;
            height: 350px;


        }

【讨论】：

好吧！我使用你的建议输入'.../'没有用，但正如你建议的那样，我重新检查了路径，它是'../'。如此固定，令人惊讶