Bilder mit CSS stylen
Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/1103409687.shtml
Die Formatierungsbefehle von CSS lassen sich nicht nur für Textelemente verwenden - auch Bilder können durchaus vom Stylesheet-Einsatz profitieren. Nebenbei umgehen Sie damit die Verwendung alter HTML-Attribute wie img border.
Die Standard-Darstellung
Zunächst einmal zeigen wir Ihnen unser Bilder unverändert: ein einfaches img-Tag, ohne jegliche Attribute:
Mit und ohne Rahmen
CSS erlauben Rahmen-Einstellungen für alle Elemente, so auch für Bilder:
border-width: 3px; border-style: dotted; border-color: blue;
border-width: 10px; border-style: groove; border-color: silver;
Wenn Sie keine Rahmen mögen, können Sie natürlich auch border-width: 0px; angeben.
Bilder als Hintergrundbilder
Sie können beliebige Elemente via CSS mit Hintergrundbildern versehen. Hier dient uns als Beispiel-Element ein einfaches <div>, prinzipiell formatiert zunächst mit style="width: 300px; height: 200px; border-width: 1px; border-style: solid; border-color: black;". Je nach konkretem Beispiel kommen noch spezielle Formatierungsanweisungen hinzu.
Das Standard-Hintergrundbild
Mit background-image: url(bild_beispiel.jpg); legen Sie das Hintergrundbild fest, das einem Element zugewiesen werden soll.
Oft ist die "Pflasterung" des zur Verfügung stehenden Platzes mit dem Hintergrundbild nicht erwünscht.
Wiederholungen verhindern
Solche Wiederholungseffekte lassen sich durch die Verwendung von background-repeat unterbinden:
background-repeat: no-repeat;
Eindimensionale Wiederholungen
Wenn Ihnen das auch nicht gefällt, haben Sie noch die Möglichkeit, das Bild nur in einer Richtung wiederholen zu lassen. Verwenden Sie dann einfach die Werte repeat-x bzw. repeat-y anstelle von no repeat:
background-repeat: repeat-x;
Hintergrundbild ausrichten
Im vorletzten Beispiel hängt unser Beispiel-Planetensystem so unschön in der linken oberen Ecke. Viel schöner wäre es doch, wenn es innerhalb seines Elements zentriert wäre. Dazu verwenden wir die Eigenschaft background-position:
background-repeat: no-repeat; background-position: center center;
... wobei das erste center sich auf die horizontale, das zweite auf die vertikale Ausrichtung bezieht. Es ginge auch anders, z.B. so:
background-repeat: no-repeat; background-position: center bottom;
Insgesamt stehen zur Verfügung: left center right sowie top center bottom.
Hintergrundbilder überlagern / zwei Hintergrundbilder
CSS erlauben es leider nicht, mehr als ein Hintergrundbild für ein Element zu definieren - stellen Sie sich einmal vor, was für interessante Überlagerungseffekte damit möglich wären.
Doch je nachdem, was Sie sich vorstellen, können Sie einen ähnlichen Effekt erzielen, indem Sie Elemente ineinander verschachteln und dann separate Hintergrundbilder zuweisen:
Der Code für diese wunderbare Konstruktion sieht so aus:
<div style="width: 300px; height: 200px; border-width: 1px; border-style: solid; border-color: black; background-image: url(/awd/bilder/bild_beispiel.jpg);">
<div style="margin-left: 100px; width: 100px; height: 100px; background-image: url(/awd/bilder/bild_beispiel_2.jpg); background-repeat: no-repeat; background-position: center center;">
</div>
</div>
Fixe Hintergrundbilder
Das Standardverhalten eines Hintergrundbildes ist es, sich bei Scrollbewegungen mitzubewegen. Wir demonstrieren das hier am Beispiel eines scrollbaren Layers.
Der Code im Ganzen:
<div style="width: 300px; height: 100px; overflow: auto; background-image: url(/awd/bilder/bild_beispiel.jpg); color: silver;">Lorem...</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Die Attribut-Zuweisung background-attachment: fixed; sorgt dann dafür, dass der Hintergrund auch beim Scrollen still steht.
<div style="width: 300px; height: 100px; overflow: auto; background-image: url(/awd/bilder/bild_beispiel.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; color: silver;">Lorem...</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Berührungsempfindliche Hintergrundbilder
CSS ermöglichen, eine Standardreaktion auf einen Mauszeigerkontakt zu definieren. Das gilt natürlich auch für Hintergrundbilder.
Das heißt im Klartext: das, wofür früher JavaScript nötig war (Bild-Austausch bei Mausberührung, insbesondere in Navigationsmenü), funktioniert heute mit Cascading Style Sheets.
Ja? Wirklich? Nein. So ist es nicht ganz. Der Internet Explorer spielt da leider (noch) nicht mit. Er interpretiert den :hover-Zusatz nur bei Links. Ich persönlich rechne damit, dass sich das in absehbarer Zeit ändert - bis dahin kann man sich das Beispiel im Firefox ansehen und die Eleganz des Codes bewundern.
Im Code sieht das so aus:
<style type="text/css">
#hoverIMG {width: 300px; height: 200px; border-style: solid; border-color: black; background-image: url(/awd/bilder/bild_beispiel.jpg); background-repeat: no-repeat; background-position: center center;}
#hoverIMG:hover{background-image: url(/awd/bilder/bild_beispiel_2.jpg); }
</style>
....
<div id="hoverIMG">
</div>
Das Beispiel dazu findet sich hier.
Fazit
Mit CSS gestaltete Bildeffekte sind keine pompösen Knaller, sondern eher dezentes Tischfeuerwerk. Richtig eingesetzt, werten sie den optischen Eindruck einer Seite dezent auf. Eher Firmen-Website als Gamer-Community, aber auch bei letzterer gut zu verwenden.