Wie zeige ich einen zweifarbigen Bereich?

Question

Seit jetzt, in der Gestaltung einer der Websites, die ich arbeite, habe ich eine Grafik verwendet, um die Kopfzeile zu dekorieren, die in einer diagonalen Teilung weiß in der unteren Seite und transparent in der oberen Seite besteht. Das Ergebnis ist dieser:

Wenn ich obere Farbe zu ändern, wie das Bild in seinem oberen Bereich transparent ist der Effekt scheint perfekt:

Nun, ich brauche Benutzer zu ermöglichen, Seitenhintergrund zu ändern, und das ist das Problem:

Der Hintergrund wird rot, aber das Bild, mit dem ich den Header dekoriert habe, ändert sich nicht.

Gibt es eine Möglichkeit, Benutzern zu erlauben, den Hintergrund zu ändern, ohne die Kopfdekoration zu ruinieren?

Beachten Sie, dass eine Kopie der Dekoration Bilder in verschiedenen Farben speichern ist keine Option, da ich den Benutzern erlauben, jede 24-Bit-Farbe zu wählen. Auch das Ändern des Bildes in Echtzeit wie explained here ist keine Option, da mehrere Benutzer auf dieselbe Datei zugreifen können.

Answer 1

folgende Unterlagen an das div mit dem Hintergrundbild hinzufügen:

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

Das Problem derzeit ist, dass der Hintergrund nicht Ihre div mit dem Hintergrundbild überlappen. Das Hinzufügen der position: absolute gibt Ihrem div eine Art "Ghost Box" -Modell, so dass der Hintergrund des Körpers es überlappen kann.

S.S .: Sie können auch mit z-index spielen, wenn Sie möchten.

Answer 2

Sie könnten versuchen, das Bild in Echtzeit unter Verwendung von Daten URIs zu ändern: https://developer.mozilla.org/en/data_URIs

Mit einer Daten URI, können Sie so etwas wie das folgende tun: <img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />. Das Bild kann dynamisch in JS geändert werden, indem ein neues Bild erzeugt und das Attribut src auf den neuen Daten-URI gesetzt wird.

Sie müssen jedoch ein geeignetes Format zum Erzeugen von Bildern in JS finden. Ich habe pnglib.js zuvor verwendet, und es funktioniert, aber es könnte langsamer sein, als Sie es vorziehen würden. Möglicherweise müssen Sie einige verschiedene Bibliotheken und Bildformate testen, um festzustellen, welche schnell erstellt werden können. Machen Sie das Bild auch so klein wie möglich - sollte nur der Bereich mit der diagonalen Teilung sein, der Bereich rechts kann stattdessen mit einer div gemacht werden.

Alternativ können Sie eine eindeutige Image-Server-Seite über ein Skript generieren. Erstellen Sie ein Skript, das einen GET-Parameter für die Hintergrundfarbe verwendet und das entsprechende Bild generiert (für PHP können Sie GD oder IMagick verwenden). Vorteil ist, dass der Server das Bild schneller generiert und es schneller an den Client sendet, als der Client es in JS generieren könnte.