Question

我现在正在学习基础知识。我正在关注Udemy课程，图像根本不显示。

<!doctype html>
<html>

    <head>
        <title>CSS Basics</title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            #main {
                width:800px;
                height:1000;
                margin-left: auto;
                margin-right: auto;
                background-color: #82b3ae;
                padding:20;
            }
            h1 {
                text-align: center;
                color: green;
                font-size: 50;
            }
            #jumbotron {
                background-image: url('../assets/banner.jpg'); 
                height: 200px;
                width: 800px;
            }
        </style>
    </head>

    <body>
        <div id="main">
            <div id="jumbotron">
                 <h1>Neil Harper's Website</h1>
            </div>
            <p>Lorem ipsum dolor sit amet, eros elit recteque ex pri, mei iusto oratio te. Duo equidem dolorum antiopam ea. Munere electram suavitate has an. An mei ornatus sensibus eleifend. Vero tritani pro id.</p>
            <p>Ut quo esse porro honestatis, vis ad nisl vidit, id assum voluptaria his. Eos ei tibique vituperata, ridens mentitum persequeris mei in. Habeo doctus partiendo eu nam, dicant appetere vim ex, quo et esse regione. Pri habeo soleat commune cu.
                Ei possit prompta commune vim, cu latine nostrum vix.</p>
        </div>
    </body>

</html>

Answer 1

尝试将background-size: 100%;添加到#jumbotron

Answer 2

这是一个很好的工作。但是你的背景位置没有设定。

这是一个用于演示的小小问题 https://jsfiddle.net/a1gqsw24/

#main {
                width:800px;
                height:1000;
                margin-left: auto;
                margin-right: auto;
                background-color: #82b3ae;
                padding:20;
            }
            h1 {
                text-align: center;
                color: green;
                font-size: 50;
            }
            #jumbotron {
        background:url('http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg') no-repeat fixed center; 
                height: 200px;
                width: 800px;
            }

这个网站是学习HTML，CSS，JS或PHP的非常好的资源。 http://www.w3schools.com

也许你应该从那里开始。玩得开心： - ）

Answer 3

图像文件可能未正确链接。

如果banner.jpg文件与您的html位于相同目录中，请使用以下文件路径：

background-image: url('/banner.jpg');

如果它的高于您的html目录，请使用以下内容：

background-image: url('../banner.jpg');

如果高于您的html目录，而位于文件夹中，请说assets，请使用以下内容：

background-image: url('../assets/banner.jpg');

（你得到漂移）

../基本上意味着一个文件夹（与在Windows中使用BACK按钮相同的概念），如果您正在浏览文件和文件夹。

无法弄清楚如何将背景图片输入我的<div>工作正确的</div>

3 个答案: