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之类的在线帮助或其他您可以找到的其他内容来刷新基础知识。

将背景图像设置为div

1 个答案: