在html5/css中使用單一rgb透明色疊加圖像

我想將固定背景rgb顏色（例如（0,0,0））的圖片（gif彩色圖像）讀入我的html5程序中，並覆蓋它在另一張圖片上，只有背景色是透明的。注意這個背景並不是一個固定的形狀 - 例如，前景鳥在它上面飛行的天空。我只想看看這隻鳥。我嘗試以下，在html5/css中使用單一rgb透明色疊加圖像

<div style="z-index: 100; position: absolute; top: 39px; left: 72pix; background-color: #ffffff; opacity: 0.5"> 

<img alt="overlay image" src="overlay.gif" WIDTH=32 HEIGHT=32></div></div>

但是這使得整個覆蓋0.5透明。我試着插入這一點，

<div style="background: rgba(0,0,0,0.0)"></div>

但這並不改變圖像的RGB值，僅設置圖像周圍的實際背景。

來源

2013-02-08 user2055050

我會使用照片編輯軟件來創建透明度。試試像photoshop或paint.net。 – MiniRagnarok 2013-02-08 18:11:52

謝謝。雖然我沒有說，但這不是我想疊加的一張圖片;我讀了一個AVI電影文件，每幀都是我想要的背景透明度的圖像。我不認爲電影格式具有像png這樣的透明度值。 – user2055050 2013-02-08 20:27:30

您將無法僅使用CSS/HTML進行此操作。它將需要SVG或JavaScript。對類似問題的回答是here。

來源

2013-02-08 18:47:57 DaciaG

謝謝。您在CSS/HTML文檔中爲我省去了更多徒勞的搜索。我希望它可以在比javaScript更高的層次上完成，但是在那裏完成並沒有問題 - 並且感謝您使用javaScript鏈接。 – user2055050 2013-02-08 20:30:11

在html5/css中使用單一rgb透明色疊加圖像

回答

相關問題