Question

我目前正在使用以下代码：

  body {
    background: url("image1") repeat fixed center top #000000;
    border: 0 none;
    color: #DBDBDB;
    font-family: Verdana;
    font-size: 9px;
    font-weight: normal;
    text-decoration: none;
  }

  inlineContent {
    background: url("image2") no-repeat scroll center top transparent !important;
    display: inline-block !important;
    height: 425px !important;
    left: -282px !important;
    margin: auto !important;
    position: absolute;
    right: 0 !important;
    top: -425px !important;
    width: 900px !important;
    z-index: -1 !important;
  }

我有一般背景（身体后面的第一行），我在背景上有另一个图像（inlineContent之后的行）。如何在原始背景的顶部添加另一个图像，其位置与前两个图像的位置不同？

提前谢谢！

Answer 1

你可以这样使用

inlineContent{
    background: url("image2") no-repeat scroll center top transparent !important, url("image3") no-repeat scroll right top transparent !important,;
    display: inline-block !important;
    height: 425px !important;
    left: -282px !important;
    margin: auto !important;
    position: absolute;
    right: 0 !important;
    top: -425px !important;
    width: 900px !important;
    z-index: -1 !important;
}

您的问题也在这里得到解答：Can I have multiple background images using CSS?

以下是一个很棒的教程：http://www.css3.info/preview/multiple-backgrounds/

Answer 2

您是否尝试使用伪元素：before和：after？

例如：

inlineContent:before {
    content: "";
    position: ;
    top: ;
    left: ;
    z-index: ;
    display: inline-block;
    margin: ;
    width: ;
    height: ;
    background: url("image3") no-repeat scroll center top transparent;
}

那里有很多好文章。你可以查看一篇来自css-tricks.com的文章，他描述了你可以用它们实现的所有很酷的东西。

但更重要的问题是为什么你到处使用！重要吗？

CSS多背景定位

2 个答案: