将背景图像设置为div

Progiahuy1

我试图将我的页面编写如下：

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

而不是我设置的背景图像。如何解决此问题并显示图像？

玛丽安·里克（Marian Rick）

目前，您正在使用* {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之类的在线帮助程序或其他类似的东西来刷新基础知识。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。