Hintergrundbild und -farbe (transparent) einstimmig
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
code
container
ermitteln
erzeugen
farbe
fehlerhaft auftritt
glauben
hintergrund
hintergrundbild
ladezeit
liegen
nachteil
rahmen
schritt
transparenz
umgehen
url
veranschaulichung
zahlenwert
-
Hallo,
ich habe bei einem Design mehrere Hintergrund-Bilder. Die wichtigsten sind:
1) Body: repeat/ Wabenmuster (zieht sich über das komplette Dokument)
2) Wrapper (Container für alle Inhalt - mittig): no-repeat/ halbtransparentes Bild (980px zu 1300px), dass mit einem dunklen Farbton endet
Nun möchte ich, dass der unterste Farbton des Wrapper-Hintergrundbildes weitergeführt wird. Allerdings ist dieser dunkle Farbton transparent und ich sehe keine Möglichkeit die Transparenz zur ermitteln, um bspw. einen RGBA-Wert zu bekommen.
Gibt es eine Möglichkeit die Farbe und die Transparenz eines Bildes zu ermitteln? oder
Kann man den letzten Teil des Wrapper-Hintergrundbildes ausschneiden und diesen mit vertikaler Wiederholung ausgeben, nachdem das Wrapper-Hintergrundbild zu ende ist, sprich einen Hintergrundwechsel nach 980px?
Ich hoffe es ist einigermaßen erkenntlich, was ich versuche umzusetzen.
Grüße Maik
Beitrag zuletzt geändert: 24.11.2011 18:00:43 von ploco -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich sehe hierbei mehrere Lösungsansätze:
1. das Hintergrundbild im Wrapper veränderst du auf die Maße von 1Px Breite und z.B. 5000px Höhe. Dann wiederholst du diesen mit y-repeat. das Bild hat unter deiner bestimmten Pixelanzahl eben nur noch die eine Farbe. Nachteil wäre die eventuell größere Ladezeit oder bei sehr langen Seiten(Höhe) das der Hintergrund vielleicht dann fehlerhaft auftritt, kann aber mit der Höhe ermittelt werden.
2. Du könntest eine Hintergrundfarbe(Wapper) definieren die den letzten Farbton wiedergibt, und gleichzeitig das Hintergrundbild(wapper) verwendest, dabei würde das Bild den Grundton überlagern, wichtig dabei die musst das Hintergrundbild ohne Transparenz speichern. Abschließend setzt du die Transparenz des Containers auf deine gewünschte Transparenz. Nachteil kann die fehlerhafte Darstellung in älteren Browsern darstellen und die mögliche Vererbung des Transparenz-Wert auf darin liegende Objekte.
3. Du könntest das Hintergrundbild des Wappers so vergrößern das er das Wabenmuster gleich mit beinhaltet. Nachteile wären riesige Dateien und eine nicht sehr komfortable Lösung.
Ein Link zu deiner Seite wäre nett.
mfg Stephan -
Danke für die Tipps.
seikai schrieb:
Ein Bild zur Veranschaulichung wäre vielleicht doch angebracht
Ich darf dieses Design/ Teile davon zu diesem Zeitpunkt (noch) nicht veröffentlichen.
daswing schrieb:
1. das Hintergrundbild im Wrapper veränderst du auf die Maße von 1Px Breite und z.B. 5000px Höhe. Dann wiederholst du diesen mit y-repeat. das Bild hat unter deiner bestimmten Pixelanzahl eben nur noch die eine Farbe. Nachteil wäre die eventuell größere Ladezeit oder bei sehr langen Seiten(Höhe) das der Hintergrund vielleicht dann fehlerhaft auftritt, kann aber mit der Höhe ermittelt werden.
Es auf die Breite von 1px zu minimieren ist leider nicht möglich, da sich das Bild sowohl von rechts nach links, als auch von oben nach unten verändert. Allerdings halte ich diesen Lösungsansatz bisher für die einfachste und sauberste Lösung.
Ich habe es mal ausprobiert und bei einer Auflösung von 980px zu 3000px hält sich die Dateigröße im Rahmen von 30 kB.
Da ich aber so viel wie möglich per Code erzeugen möchte, bin ich mit der Lösung nicht 100%ig zufrieden, allerdings funktioniert es wie es soll
3. Du könntest das Hintergrundbild des Wappers so vergrößern das er das Wabenmuster gleich mit beinhaltet. Nachteile wären riesige Dateien und eine nicht sehr komfortable Lösung.
Das geht nicht, da sich das Wabenmuster auf jeder Auflösung über die gesamte Webseite erstrecken soll.
Grüße Maik -
ploco schrieb:
Es auf die Breite von 1px zu minimieren ist leider nicht möglich, da sich das Bild sowohl von rechts nach links, als auch von oben nach unten verändert. Allerdings halte ich diesen Lösungsansatz bisher für die einfachste und sauberste Lösung.
Ich habe es mal ausprobiert und bei einer Auflösung von 980px zu 3000px hält sich die Dateigröße im Rahmen von 30 kB.
Da ich aber so viel wie möglich per Code erzeugen möchte, bin ich mit der Lösung nicht 100%ig zufrieden, allerdings funktioniert es wie es soll
Das der Background(wapper) sich auch so ändernd wusste ich ja nicht, aber du kammst ja selbst auf eine Lösung.
Da ich selbst mit schon recht gut mit CSS umgehen kann oder denke ich zumindest. Schien mir das neben 2. die einfachste Lösung zu sein. Meine Frage ist was stört dich daran und was hälts du von Lösung Nummer2.
opacity: 0.5;
der Zahlenwert muss zwischen 0 und 1 liegen und darf glaube ich max in 0.01-er Schritten erfolgen
mfg Stephan -
daswing schrieb:
Da ich selbst mit schon recht gut mit CSS umgehen kann oder denke ich zumindest. Schien mir das neben 2. die einfachste Lösung zu sein. Meine Frage ist was stört dich daran und was hälts du von Lösung Nummer2.
opacity: 0.5;
der Zahlenwert muss zwischen 0 und 1 liegen und darf glaube ich max in 0.01-er Schritten erfolgen
mfg Stephan
Der größte Nachteil dieser Methode dürfte darin liegen, dass nicht nur der Hintergrund, sondern auch alle Inhalte des Wrappers durchsichtig wären.
Allerdings sollte sich dieser Gedanke per RGBA Wert umsetzen lassen, da der 4. Parameter die Transparenz wiedergibt. Leider wäre auch die Lösung mit dem RGBA-Wert nicht optimal, da sich das Wabemuster bei unterschiedlichen Auflösungen horizontal verschiebt und ein unsauberer Übergang resultieren würde.
Trotzdem vielen Dank für deine interessanten Lösungsansätze
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
