3

I am currently working with the following code:

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

Where I have a general background (first line after body), and I have another image ontop of the background (lines after inlineContent). How would I be able to add another image, also ontop of the original background, with a different position than the the previous two images?

Thank you in advance!

4

2 回答 2

0

你可以使用这种方式

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/

于 2012-11-22T23:06:36.710 回答
0

您是否尝试过使用伪元素 :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？

于 2012-12-10T09:39:16.820 回答