个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 09:28:09 28 4
gpt4 key购买 nike

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

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

    }

最佳答案

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


        }

关于css - 背景图像不会显示使用 HTML5 样板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25816630/

28 4 0
文章推荐： css - 对 Angular 渐变和替代品中的平滑线
文章推荐： javascript - 如何获得一致的 javascript window.outerHeight 跨浏览器？
文章推荐： javascript - 查找函数调用的 DOM 位置
文章推荐： css - HTML5 按钮样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com