CSS多圖像背景行？

我做了一個搜索，無法找到我的特定查詢的答案...承認這可能是由於我的新手能力和有缺陷的想法。我試圖完成的是兩行3個非平鋪，不重複的並排圖像......設置爲我的網頁背景。CSS多圖像背景行？

下面是基本的HTML格式，我想複製一個CSS背景：

<HTML> 
<span><img src="images/image1.gif"><img src="images/image2.gif"><img src="images/image3.gif"><BR><img src="images/image4.gif"><img src="images/image5.gif"><img src="images/image6.gif"></span> 
<HTML>

這是我在一個CSS的解決方案原油嘗試：

<style type="text/css"> 
body 
{ background-image: url('images/image1.gif'), url('images/image2.gif'), url('images/image3.gif'), url('images/image4.gif'), url('images/image5.gif'), url('images/image6.gif'); background-repeat: no-repeat; } 
</style>

這雖然「工作「......所有我設法做的是將6張圖像直接堆疊在左上角。任何幫助newb將不勝感激。

謝謝！

來源

2013-03-06 user2138961

如果你知道每個圖像的尺寸，你可以用'背景position'; – Passerby 2013-03-06 08:37:47

你可以使用你的HTML，但給'position：absolute'和'z-index：-1'作爲背景。 – Zemljoradnik 2013-03-06 09:00:29

您需要明確地將background-position分配給每個背景圖像。這應該適用於您的條件：

background-position: top left, top center, top right, bottom left, bottom center, bottom right;

也看看background-size css屬性。

Working Fiddle

來源

2013-03-06 08:41:59

謝謝，我已經嘗試過了，它確實將圖像並排放置...但由於圖像大小（350像素），每個圖像之間存在巨大差距。我想讓他們排成一行，沒有空白。有沒有辦法用CSS來完成這個工作？ – user2138961 2013-03-06 14:19:08

@ user2138961正如我所提到的，看看'background-size'屬性（查看我的更新後的鏈接）。或者做一些計算來使其合適。 :)。 – 2013-03-06 15:14:46

CSS多圖像背景行？

回答

相關問題