CSS多重背景定位

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

我有一个通用背景（body后的第一行），并且我在背景上方有另一张图片（inlineContent后的行）。如果我想添加另一张图片，也在原始背景的顶部，并且位置不同于前两张图片，该怎么做呢？

非常感谢！

- user1846225

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

你的问题在这里也有答案：我可以使用CSS拥有多个背景图片吗？

这是一个很棒的教程，讲解了它的工作原理：http://www.css3.info/preview/multiple-backgrounds/

- Idrizi.A

---

哦，但是用那种方法，指定的位置适用于两个图像。我该如何让这两张图片具有单独且不同的位置？ - user1846225

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上的一篇文章，他在其中描述了你可以通过它们实现的所有酷炫效果。

但更重要的问题是，为什么你到处都在使用!important？

- orustammanapov