nicht angemeldet
Grafik überlagern nur per CSS?
Camping_RIDER
Gunnar BittersmannHi,
ich möchte Bilder in Websites mit einer gekachelten "Punkt" Textur überlagern. Sowas sieht man manchmal bei Hintergrundbildern. Im Prinzip eine ein Pixel Textur mit zwei Pixel Abstand.
Ist es möglich dieses Bild "nur" per CSS über den Bildern anzeigen zu lassen? Ohne den HTML Quellcode zu ändern?
Die Bilder welche überlagert werden sollen, werden per CSS background: eingebunden.
Es gibt also ein HTML Element mit diesem Hintergrundbild und kein weiteres Element was man nutzen könnte für die Überlagerung.
Vielleicht gibt es aber doch einen Trick?
Liebe Grüße
uli
-
Hi,
Es gibt also ein HTML Element mit diesem Hintergrundbild und kein weiteres Element was man nutzen könnte für die Überlagerung.
Noch nie von Pseudoelementen/generated content gehört? Na dann sind das deine Suchbegriffe.
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/-
Aloha ;)
Es gibt also ein HTML Element mit diesem Hintergrundbild und kein weiteres Element was man nutzen könnte für die Überlagerung.
Noch nie von Pseudoelementen/generated content gehört? Na dann sind das deine Suchbegriffe.
Das nützt aber nur was, wenn das ganze Element überlagert werden soll, statt nur dem background.
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
-
-
Aloha ;)
ich möchte Bilder in Websites mit einer gekachelten "Punkt" Textur überlagern. Sowas sieht man manchmal bei Hintergrundbildern. Im Prinzip eine ein Pixel Textur mit zwei Pixel Abstand.
Ist es möglich dieses Bild "nur" per CSS über den Bildern anzeigen zu lassen? Ohne den HTML Quellcode zu ändern?
Die Bilder welche überlagert werden sollen, werden per CSS background: eingebunden.
Es gibt also ein HTML Element mit diesem Hintergrundbild und kein weiteres Element was man nutzen könnte für die Überlagerung.
Vielleicht gibt es aber doch einen Trick?
In dem Fall kenne ich keinen, der nicht das ganze Element (statt nur den background) überlagert. Wenn es nicht anders als mit background:... geht, müsstest du (imho, vielleicht weiß jemand anderes mehr) serverseitig (z.B. per php) vor der Auslieferung an den Browser bildbearbeiterisch tätig werden.
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
-
@@uli:
nuqneH
ich möchte Bilder in Websites mit einer gekachelten "Punkt" Textur überlagern. Sowas sieht man manchmal bei Hintergrundbildern.
Warum tust du da nicht im Bildbearbeitungsprogramm deiner Wahl?
Vorteil: Der Browser hat beim Rendern weniger zu tun. Könnte auf Mobilgeräten einen Performanzunterschied machen.
Außerdem muss nur eine Bilddatei statt zwei übertragen werden, die allerdings größer sein dürfte als die Summe der beiden anderen.
Ist es möglich dieses Bild "nur" per CSS über den Bildern anzeigen zu lassen?
Natürlich. Elemente können mehrere Hintergrundbilder haben. In allen relvanten Browsern.
Fallback für IE < 9:
#foo { background-image: url(foo.jpg); background-image: url(pattern.png), url(foo.jpg); }Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)