你可以在網頁上疊加圖片嗎？

我想建立一個網站，這是一個「打扮」的遊戲，你可以點擊不同的配件，它們將層疊在一起。你可以在網頁上疊加圖片嗎？

因爲這是一個有點很難形容，我發現這些例子應該希望強調什麼，我試圖做的：

This is the closest website that I have found，但我似乎無法找到正在盤算着如何代碼圖像應該位於彼此之上。
Similar to this iOS princess game

我有數百種不同的配件爲圖像，現在，（類似於上面的遊戲），我需要支持能夠選擇一個以上。所以我需要一個解決方案，不需要我預先保存公主頂部的每個輔助組合滲透圖像（因爲這將是數百萬個預定義的圖像）。

理想情況下，我想要一個Javascript/jQuery或CSS解決方案，但會採取任何人都有的建議。 Flash建議也會有所幫助。

所以我的問題是：

是怎樣的例子網站上面排隊的所有圖像在彼此的頂部？我似乎無法找到任何正在做它的CSS或Javascript代碼？
有沒有關於如何建立這種類型的網站（鏈接，教程或代碼示例會很好）的建議？

來源

2011-06-27 leora

分層圖像是可能的HTML和CSS。您甚至可以使用jQuery插件使用鼠標拖動圖像。 – Sparky

我不認爲這與JavaScript有很大關係。這看起來像一個HTML和CSS問題。一旦定義了圖像放置策略，z-index和半透明或不透明度，腳本可能會對動態更改有用。 – RobG

不完全是答案：但並不那麼了不起：http://bloom.io/（他們通過將圖像放在另一個上面來完成） –

簡短的回答是肯定的。

處理此問題的方法有很多。使用HTML/CSS，您可以輕鬆地將元素放在彼此之上。

HTML：

<img id="imga" src="img1.png"/> 
<img id="imgb" src="img2.png"/> 
<img id="imgc" src="img3.png"/>

CSS：

img 
{ 
    position:absolute; 
    top: 0px; 
    left: 0px; 
}

那麼讓我們來看看這裏有什麼重要的。您的HTML文檔中有3個圖像（imga，imgb和imgc）。爲了覆蓋這些，您必須首先將它們的位置設置爲絕對，以便圖像將忽略任何默認佈局行爲。然後，您可以使用左側的和頂部屬性分別定義img元素的x，y座標。在上面的示例中，所有元素都覆蓋在頁面的左上角。在其頂部圖像結束順序控制，您可以使用的z-index屬性，像這樣：

#imga 
{ 
z-index: 10; 
} 

#imgb 
{ 
z-index: 20; 
} 

#imgc 
{ 
z-index: 30; 
}

這將使IMGC出現在眼前，IMGB出現背後IMGC，和imga背後的一切。 z-index屬性指定哪個元素在另一個元素前面。具有最大z-index的元素排在第一位，其次是第二大等。

爲您的項目，我們可以稍微調整上面的代碼：

HTML

<img id="layer1" src="img1.png"/> 
<img id="layer2" src="img2.png"/> 
<img id="layer3" src="img3.png"/>

CSS

img 
{ 
position:absolute; 
top: 0px; 
left: 0px; 
} 
#layer1 
{ 
    z-index: 10; 
} 
#layer2 
{ 
z-index: 20; 
} 

#layer3 
{ 
z-index: 30; 
}

既然你現在明白是什麼樣的地方，你知道該層3位於頂部（配件層），層2位於中間（您的人）。而layer1位於底部（背景）。然後你就可以創建出象這樣的配件：

<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/>

，然後使用JavaScript，您可以設置在第一層的src等於被點擊附件的。

function setAccessory(path){ 
    document.getElementById('layer1').src = path; 
    //if you're using jQuery, $("#layer1").attr("src", path); 
}

，只要你想你可以創建許多配件。假設你想在你的人物上添加更多的配件，那麼你可以很容易地創建更多的圖層，分配他們的z-索引（甚至可以動態地使用javascript來實現，這是多麼令人興奮！）

總之，我希望你找到這個小教程很有用。出於你的目的，我建議看看jQuery以及元素。他們會很有趣，並且肯定會幫助你的應用程序。

與您的應用程序的好運氣。

來源

2011-07-02 06:58:45

+1，這是一個很好的詳盡答案。不過，我認爲你已經得到了z-index：z-index越高，越靠近堆棧頂部（在z軸上）。見[這裏]（https://developer.mozilla.org/en/CSS/z-index） –

你說得對。我很抱歉，這是固定的。 +1 –

在這種情況下，常識還沒有作爲答案檢查。所以+1 :)。 – Caimen

您必須使用position：absolute與定義的頂部和左側位置的組合，以及z-indexes來控制哪些項目出現在頂部。

來源

2011-06-27 03:45:52

你知道任何好的參考資料或教程嗎？ – leora

您可能想要開始查看jQuery UI的可拖動和可拖放功能。那些使移動元素四處移動並將它們捕捉到某些位置更容易。對於z-index，只要確保衣服/飾品的z-index值高於基礎'禮服' –

我會考慮使用<canvas>標記和API的。

它可以讓你絕對地放置物品和圖像，而且，如果你正在使用一個新的瀏覽器，你將得到硬件加速的好處，這將加速整個事情。

爲了在IE中向後兼容，您需要使用Google的Explorer Canvas javascript插件。

來源

2011-06-27 03:46:39

使用CSS屬性的組合，你可以實現你所追求的。

要將附件放在正確的位置，您可以將位置設置爲絕對值，並使用絕對座標來指定它們的位置。

要設置它們顯示的順序，可以使用z-index屬性將它們「堆疊」起來。

退房：

http://www.html.net/tutorials/css/lesson15.php

有關它的一些詳細信息，。

來源

2011-06-27 03:47:20

如果你正在尋找需要更少的代碼的解決方案，試試這個：

在photoshop中不同的層
保存每一層作爲一個單獨的圖像上創建你的藝術，每個附件。確保將所有圖像製作爲完整的畫布大小，並使用透明度。另存爲PNG-24。這樣，每個配件的位置將在圖像中「硬編碼」，因此您不必在代碼中處理它。
創建一個容器<div>，並給它position: relative;。
將所有的圖像，<div>內部，如圖<img>標籤，以正確的順序（堆疊中的層時，背景圖像是第一個）
上每<img>應用position: absolute;。

這應該讓你開始。然後使用jQuery切換每個圖像，因爲代表它們的按鈕被點擊。

來源

2011-07-02 06:50:43 bfavaretto

使用jQuery動畫，您可以創建「可拖動」圖像。給你的圖像一個onmousedown事件，啓動一個函數，根據當前鼠標位置移動圖像X水平和Y垂直像素。看看這個鏈接，看看如何用jQuery找到鼠標位置。 http://docs.jquery.com/Tutorials:Mouse_Position

或者，更好的辦法是獲得jQuery UI的「droppable」插件，它可以輕鬆地爲任何元素提供拖放功能。 http://jqueryui.com/demos/droppable/

來源

2011-07-03 13:11:48 penco

CSS3支持multiple background layers

#example1 { 
    width: 500px; 
    height: 250px; 
    background-image: url(sheep.png), url(betweengrassandsky.png); 
    background-position: center bottom, left top; 
    background-repeat: no-repeat; 
}

來源

2011-07-05 07:28:30 AlienWebguy

你可以在網頁上疊加圖片嗎？

回答

相關問題