Question

我很难在css中显示我的背景图片。我创建了一个带有.top类的div，但每次使用background-image css属性时，除颜色，高度和宽度外都不显示任何内容。我也使用了Initializr的HTML5 boilerplate。如果我愿意使用＆＃34;

    <!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%;

    }

Answer 1

在 background-image 规则中，您无法编写重复属性。正确的解决方案在这里，您可以选择长版或短版。还要检查图像路径是否为真。

.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;


        }

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

1 个答案: