如何顯示雙色區域？

Question

從現在開始，在我工作的網站之一的設計中，我一直使用圖形來裝飾標題部分，該部分由下部的白色對角線分區和上部的透明區域組成。結果是這樣的：

如果我改變上面的顏色，作爲圖像在其上部區域是透明的效果似乎完美：

現在，我需要允許用戶改變頁面背景，這就是問題所在：

背景更改爲紅色，但用於裝飾標題的圖像不會更改。

有沒有什麼辦法可以讓用戶更改背景而不會破壞標頭裝飾？

請注意，以不同顏色存儲裝飾圖像的副本不是一個選項，因爲我允許用戶選擇任何24位顏色。另外，由於多個用戶可能訪問同一個文件，因此要實時更改圖像（如explained here）不是一個選項。

Answer 1

以下添加到與背景圖像的DIV：

position: absolute; 
top: 0px; 
right: 0px; 

目前的問題是，背景不能與背景圖像重疊的股利。添加position: absolute爲您的div提供某種「幽靈盒子」模型，從而允許身體背景重疊。

P.S .:你也可以玩z-index如果你想。

Answer 2

你可以嘗試使用數據URI實時改變圖像：https://developer.mozilla.org/en/data_URIs

與數據URI，你可以這樣做如下：<img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />。通過生成一個新的圖像並將src屬性設置爲新的數據URI，可以在JS中動態更改圖像。

你需要找到合適的格式來生成JS中的圖像。我之前使用過pnglib.js，它可以工作，但可能比您想要的要慢。您可能需要測試一些不同的庫和圖像格式以查看哪些可以快速生成。此外，使圖像儘可能小 - 應該只是對角線分割的區域，而向右的區域可以用div代替。

或者，您可以通過腳本生成唯一的映像服務器端。製作一個採用GET參數作爲背景顏色的腳本並生成適當的圖像（對於PHP，您可以使用GD或IMagick）。優點是服務器可以生成圖像並將其發送到客戶端的速度比客戶端可以在JS中生成更快。