HTML5-Handbuch - die neuen Features von HTML5

Titel: HTML5-Handbuch - die neuen Features von HTML5 Kostenlos Bücher Online Lesen
Autoren: Franzis

Vom Netzwerk:

bündig),
center
(horizontal und vertikal mittig) oder
bottom
(unten bündig) angeben. Auch Kombinationen wie
bottom
left
oder
top
right
sind möglich (die Reihenfolge der Schlüsselwörter ist egal). Neben den Schlüsselwörtern sind außerdem nummerische Werte möglich. Auch die Kombination von Schlüsselwörtern und nummerischen Werten ist erlaubt. Dadurch ergeben sich zahlreiche Möglichkeiten, die teilweise etwas Herumprobieren erfordern. Generell gilt:
Wenn bei
background-position
nur ein Wert angegeben wird, wird der zweite automatisch auf
center
gesetzt.
    Bei zwei Werten wird, wenn wenigstens einer davon nummerisch ist, die Angabe als Offset vom linken oberen Eck des Elements interpretiert, wobei der erste Wert der Offset von links ist und der zweite Wert der Offset von oben.
    Weiterhin sind Angaben wie
background-position:
bottom
10px
right
20px;
möglich. Auf diese Weise lässt sich ein beliebiges Elementeck als Ausgangspunkt definieren (im Beispiel
bottom
right
, also das rechte untere Eck). Die nummerischen Angaben sind dann der jeweilige Offset, also im Beispiel 10 Pixel von unten und 20 Pixel von rechts. Wenn Sie einen der beiden nummerischen Werte weglassen, wird dieser als 0 interpretiert.
    Mit
background-attachment:
können Sie das Scroll-Verhalten einer Hintergrundgrafik kontrollieren. Erlaubt ist eines der Schlüsselwörter
scroll
(Hintergrundgrafik scrollt mit und orientiert sich an der Position des jeweiligen Elements) oder
fixed
(das Hintergrundbild bleibt stehen und orientiert sich am Anzeigefenster). Das Default-Verhalten ist
scroll
. Im obigen Beispiel wird der
body
-Hintergrund auf
fixed
gesetzt, dies verleiht der Seite beim Scrollen mehr Ruhe.
    Mit
background:
können Sie Angaben für den Hintergrund zusammenfassen. Notieren Sie Angaben zur Hintergrundfarbe, zum Hintergrundbild und zu dessen Wiederholungen, Position usw. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren. So können Sie mit Angaben wie

    ein jeweils gewünschtes Eigenschaften-Set definieren.
Weitere Hinweise
    Wenn das Element, für das die Hintergrundgrafik definiert wird, in der Höhe oder Breite kleiner ist als die Hintergrundgrafik, wird die Hintergrundgrafik in der Darstellung an den Grenzen des Elements abgeschnitten. Abhilfe bietet hierbei die weiter unten beschriebene, mit CSS3 neu eingeführte Eigenschaft
background-size
.
    Neuere Browser unterstützen auch die Möglichkeit, mehrere Hintergrundgrafiken für ein Element zu definieren:
    background-image: url(/media/katz.png), url(/media/maus.png);
    Trennen Sie einfach mehrere URL-Angaben durch Kommata.
Referenzinformationen
    CSS-Eigenschaften
background-image
,
    CSS-Eigenschaften
background-repeat
,
    CSS-Eigenschaften
background-position
,
    CSS-Eigenschaften
background-attachment
:

14.7.3    Zusätzliche Eigenschaften für die Hintergrundgestaltung in CSS3
    CSS3 führt weitere Eigenschaften zur Kontrolle von Hintergrundfarben und/oder Hintergrundgrafiken ein. Einige Eigenschaften funktionieren nur in Form herstellerspezifischer Präfix-Varianten. So funktioniert beispielsweise
-moz-background-clip
in Gecko-basierten Browsern wie Firefox Version 3.6 oder
-webkit-background-clip
in Gecko-basierten Browsern wie Safari bei Version 4.0, die Originaleigenschaft
background-clip
dagegen erst bei aktuelleren Versionen. Der Microsoft Internet Explorer ist, wie so oft, ein Sonderfall. Denn hier werden die meisten Eigenschaften erst in der aktuellsten Version 9.0 unterstützt.
background-clip: Erstreckungsraum von Hintergrundangaben
    Innerhalb des Boxmodells von CSS beginnen Hintergrundfarben und Hintergrundbilder normalerweise am äußersten Erstreckungsrand eines Elements. Bei Elementen mit definierten Rahmen ist das der äußere Rand des Rahmens. Mit Hilfe der Eigenschaft
background-clip
können Sie das ändern:
•
background-clip: padding-box;
bewirkt, dass die Hintergrundangaben sich auf den Erstreckungsraum beziehen, der durch Angaben zu
padding
(Innenabstände) zustande kommt.
•
background-clip: content-box;
bewirkt, dass die Hintergrundangaben sich auf den Erstreckungsraum des Elementinhalts beziehen.
•   Die Default-Angabe ist
background-clip: border-box;
.
Transparente Rahmen
    Die Eigenschaft
background-clip
könnte jedoch im Webdesign der Zukunft eine durchaus interessante Rolle spielen. Denn mit etwas