2015-12-17 49 views
0

只使用css3/html5,我試圖讓單獨的和不同的背景圖像並排排列,而不是彼此重疊。是否可以平鋪多個不同的背景圖像?

從本質上講,我希望獲得多個獨立和不同的背景圖像,以表現單個背景圖像的平鋪行爲。

我也希望在不設置任何固定或特定位置的情況下實現此目的,每個簡單的背景圖像都會根據旁邊的背景圖像的大小進行調整,等等等等。

因此背景圖像像平常一樣平鋪在元素/容器上,除了平鋪中的每個單獨背景圖像都可以是唯一的。

任何想法?

+0

的[我可以使用CSS多背景圖片?]可能的複製(http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css) –

回答

0

foreach img,你想在你的「背景」中使用,創建一個div,然後使用css background-image屬性在div的邊框內顯示圖像。換句話說,不要把img標籤放在html中,鏈接到你的CSS中的源代碼。 沒有定位,你將被限制爲添加任何「前景」的內容與背景圖片的divs

基於你的措辭你的問題的方式,這可能會最終是非常耗時和令人沮喪的。也許考慮一個不同的技術與你可以理解的代碼?如果你從基礎開始,完全弄懂,創作技巧,就會發現自己

+0

我瞭解代碼,你誤解了我的問題。道歉,因爲我認爲我過度描述。你在描述圖層或將背景圖像疊加在一起時,我只是想知道是否有辦法讓不同的背景圖像尊重它們自己的物理尺寸,並且一個接一個地連續排列在一起(而不是簡單地左中右) - 類似於當你(和我原來)描述的佈局時常規(而不是背景)圖像的行爲。 – Guanto

+0

使用display:inline-block爲div – user3558499

0

這裏是我明白你的問題:

  • 我有幾個圖片文件
  • 我想顯示他們一邊並排
  • 我有一個DIV,我不希望(或不能)更改HTML我有

「使用CSS3,可以 我顯示這些圖像SID作爲我的div的背景嗎?「

如果這是你的問題,答案是否定的,不是現在。抱歉。

根據此標準規範, http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4 沒有位置值將背景圖像放置在「先前」或「浮動」之後。

在多個背景和背景上漿更多信息: http://www.css3.info/preview/multiple-backgrounds/ https://css-tricks.com/almanac/properties/b/background-size/

你可能會想看看positionning您的畫廊,包括您的IMG元素作爲絕對的一個div。如果將它放在div之前,它會出現在div的後面,併爲每個圖像文件創建一個img元素。

<div style="position:absolute;"> 
    <img src="image1.png"> 
    <img src="image2.png"> 
    <img src="image3.png"> 
</div> 
<div>the div to be backgrounded</div>