CSS多重背景定位

我目前用下面的代碼工作：CSS多重背景定位

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

如果我有一個大致的背景（體內後第一行），我有另一個圖像ontop的背景（行inlineContent後）。我如何能夠在原始背景的頂部添加另一幅圖像，其位置與前兩幅圖像不同？

預先感謝您！

來源

2012-11-22 user1846225

您可以用這種方式

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/

來源

2012-11-22 23:06:36 Enve

嗯，但使用該方法，指定的位置適用於兩個圖像。我怎樣才能讓這兩個圖像分別擁有不同的位置？ – user1846225

您是否嘗試過使用僞元素：之前和之後？

例如：

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的文章，他描述了你可以用它們實現的所有很酷的東西。

但更重要的問題是，你爲什麼要使用無處不在！重要？

來源

2012-12-10 09:39:16 orustammanapov

CSS多重背景定位

回答

相關問題