透明PNG作爲背景圖像

我有一個透明PNG元素作爲背景圖像 - 它就像一個寶麗來照片位切出，所以只是框架顯示。透明PNG作爲背景圖像

以此爲背景，我希望標準圖像坐在具有透明png背景的元素後面 - 以適應框架內部。

我試着設置z-indexing和不透明度，雖然我可以通過它的透明度設置顯示透明圖像。

任何想法？

來源

2009-11-09 mindwire22

你可以把問題的屏幕截圖放在某個地方嗎？只用解釋就很難想象。謝謝！ – 2009-11-09 23:49:08

「'我試過設置z-indexing和不透明度」？通過CSS設置不透明度？ – 2009-11-09 23:59:53

實際問題是什麼？ – 2009-11-10 00:00:12

如果.yourPhoto是背景圖像，你可以這樣做：

<div class="yourPhoto"> 
    <div class="yourPNGframeImage"> 
    </div> 
<div>

或者你可以使用內嵌圖片和位置都絕對：

<div class="container"> 
     <img class="yourPhoto" src=""> 
     <img class="yourPNGframeImage src=""> 
</div> 

.container {position: relative;} 
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;}

來源

2009-11-10 00:00:40

我喜歡這個答案。我在這個頁面上使用了一個非常類似的概念：http：//www.screenfeed.com/content/。查看與縮略圖相關的來源。 – jessegavin 2009-11-10 02:02:27

這就是我最終做的。我只是說，如果透明背景的元素坐在圖像的正面，它會表現得更好。 – mindwire22 2009-11-10 02:46:22

@ Meander365這正是上述兩個例子所做的。在這兩種情況下，「框架」都位於照片的頂部。 – 2009-11-10 15:38:11

有一個公平的幾件事情，尋找在做PNG時。

切割時請確定您的背景已關閉。背景已關閉。
導出爲png24。
如果您在IE6中，你將需要使用像成才雙螺旋PNG修復
http://www.twinhelix.com/

請嘗試以下步驟。您不必改變圖像的不透明度，因爲它會影響整個圖像。當你使用z-indexing時，你也應該放置css元素的位置

來源

2009-11-10 00:04:20 Kieran

透明PNG作爲背景圖像

回答

相關問題