將背景圖像設置為div

Question

我試圖將我的頁面編寫如下：

<div class="Conttent-Group">
    <div class="Conttent-Group-Body">
        <div class="Conttent-Body-Right">
            <div class="Conttent-Body-Left">
                 <h1><a href="#" style="text-decoration:none">News operations</a></h1>
            </div>
        </div>
    </div>
</div>

並且盡管以下css：

* {
    background-color: #006;
}
.Conttent-Group {
    margin-top: 5px;
    height: 300px;
    width: 788px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: white;
}
.Conttent-Group-Body {
    margin-left: 4px;
    margin-top: 5px;
    width: 386px;
    height: 30px;
    float: left;
    background: url (Image / module-bg-bodynew.jpg) repeat-x top center;
}
.Conttent-Body-Right {
    height: 30px;
    background: url (image / module-bg-rightnew.jpg) top right no-repeat;
}
.Conttent-Body-Left {
    background: url (image / module-bg-leftnew.jpg) top left no-repeat;
    height: 30px;
}
.Conttent-Body-Left div {
    background: #fff;
    border:> 1px solid # C6B389;
    border-top: none;
    padding: 0;
    margin-top: 7 pixels;
    height: 243px;
}
.Conttent-Body-Left h1 {
    display: block;
    margin: 0;
    padding: 20px 0 0 7 pixels;
    text-align: left;
    font-weight: bold;
    color: # E1F1FE;
    font-size: 13px;
}

但是在運行代碼時，我只會看到背景色

* { background-color: # 006; }

而不是我設置的背景圖像。 如何解決此問題並顯示圖像？

Answer 1

當前，您正在使用* {background-color: #006} 。 * selector針對每個元素，多數民眾贊成在您的身邊，這就是為什么每種背景色都相同的原因。

當您使用圖像作為背景時，首先查找其文件路徑：

/index.html
/style.css
/images/
/images/picture1.jpg
/images/picture2.jpg

如果要定位圖片，則始終必須選擇與css文件有關的文件路徑。 因此，在這種情況下，例如，您的路徑是images/picture1.jpg 。 盡管要注意文件結構（例如Images或images ）中的大小寫字母或不需要的空格。

使用此方法，您可以設置背景圖像，並且可以添加多個變量，例如：

background-image: url(images/picture1.jpg); /* no spaces inside your url */
background-repeat: no-repeat; /* or "repeat-x", "repeat-y" */
background-size: cover; /* for a fullscreen background */
background-color: #fff /* for everything your background images does not cover */

/* or combine them all into one */
background: url(images/picture1.jpg) no-repeat top center;

---

此外，您的代碼中有很多錯誤。 也許您應該考慮使用諸如Codeacademy之類的在線幫助程序或其他類似的東西來刷新基礎知識。