Mit dem Aufkommen von CSS3 DTP-Arbeiten in vielerlei Hinsicht ist nun einfacher und logischer: Schließlich können Sie nun tun, um sich flexibel konfigurieren, ein Objekt, seltener Rückgriff auf JavaScript.Angenommen, Sie haben, um die Transparenz des Hintergrunds anpassen müssen - CSS bietet gleich mehrere Möglichkeiten.
Hintergrund von einer Menge von Attributen (background-image, background-position, Hintergrund-Größe, background-repeat, background-attachment, Hintergrund-Herkunft, Hintergrund-Clip, background-color), definiert, von denen jeder allein verschrieben werden oderunter dem gleichen Attribut Hintergrund zu vereinen.Betrachten wir jede dieser im Detail.
Attribut background-color
In CSS kann die Hintergrundfarbe auf verschiedene Arten eingestellt werden: mit dem Hexadezimal-Code, Farbname oder RGB-Eintrag.In CSS3 wurde es möglich, RGB-Aufnahme-Option mit RGBA statt verwenden.Background-color: # FFDAB9
hex Farbcode wird in der Eigenschaft, nachdem das Gitter geschrieben.Wenn die Zeichen in Paaren entsprechen wie einen Datensatz, wird der Code in der Regel ein kleiner Schnitt: # ccff00 kann als # CF0 geschrieben werden:
body {background-color: # CF0;}.
Namen gibt, selbst in den exotischen Farben.
body {: purple background-color:;} Zum Beispiel, zusätzlich zu den Standard-rot und weiß, können Sie NavajoWhite (#FFDEAD) oder Honeydew2 (# E0EEE0) zu verwenden.
letzte Option RGB- oder RGBA Rekord ermöglicht es Ihnen, nicht nur Farbe, sondern auch die Transparenz des Hinter CSS, aber die Art und Weise, um in IE 9 nur ältere Versionen angeben.Andere Browser erkennen, normale Variante mit Transparenz.Nach den W3C-Standards ist es vorzuziehen, alle die gleiche RGBA statt der üblichen RGB zu verwenden.
letzten Wert im RGBA legt die Deckkraft des Hintergrundes und von 0 (transparent) bis 1 (undurchsichtig).
Es gibt einige ungewöhnliche Werte.Die Hintergrundfarbe kann unter Verwendung von HSL und HSLA angegeben werden.Beide wurden in CSS3 hinzugefügt und daher nicht von IE Version 9 oder höher unterstützt.Optionen sind identisch mit RGB oder RGBA, nur in einem anderen Format: Hue (Farbton - der Wert auf dem Farbrad, wird in Grad angegeben), gesättigte (Sättigung - Farbintensität als Prozentsatz von 0 bis 100), Lightness (Helligkeit - Helligkeit, ähnlich gemessenen Parameter Saturate).
Attribut background-image
meisten Cross-Browser-Version von einem transparenten Hintergrund - ist die Verwendung des Bildes.In CSS3, können Sie sogar noch mehr Bilder angeben, wird dies durch ein Komma erfolgen.Beispiel:
body {background-image: url (bg1.png), url (bg2.png)}.
unterstützt diese auch IE8.Mehrere Bilder als Hintergrund in dem Layout des Kautschuks verwendet.Wichtig ist, vergessen Sie nicht, ein beliebiges Bild verwenden, wie in Ihrem CSS Hintergrundfarbe, da Benutzer kann einfach ein Bild hochladen.
Attribut background-position
Wenn Sie ein Bild verwenden, um die Hintergrundblock zu definieren, ermöglicht CSS Sie das Bild auf dem Bildschirm frei positionieren.Standardmäßig wird das Bild in der linken oberen Ecke.Attribut akzeptieren mündliche Richtungen (oben, unten, links, rechts) oder numerisch (Zinsen, Pixel und andere Einheiten).Ist es notwendig, die beiden Werte für den horizontalen und vertikalen angeben:
Körper {background-position: rechts von der Mitte;} - in diesem Beispiel, wird der Hintergrund auf der rechten Seite der Seite angeordnet sein, mit der Oberseite und der Unterseite der Abstand zu dem Bild gleich sind.
Attribut background-size
Manchmal CSS verwenden, um den Hintergrund zu strecken oder zu verkleinern müssen.Zu diesem Zweck kann das Attribut background-Größe und der Größe als Hintergrundpixel oder Prozentsatz, oder in einer anderen Maßeinheit definiert werden.
Mit diesem Attribut gibt es einige Probleme: für die korrekte Darstellung von einem Hintergrund in älteren Browsern müssen Sie ein Präfix zu verwenden.Natürlich sind die aktuellen Versionen vollständig unterstützt dieses Attribut, und die Notwendigkeit für spezifische Eigenschaften verschwunden.
Attribut background-attachment
Dieses Attribut gibt das Verhalten der Hintergrundbild beim Scrollen.Zum Beispiel kann es 3 Werte annehmen (ohne erben, für die Summe aller Attribute in diesem Artikel):
- Fest - macht das Bild auf dem Hintergrund der fixiert ist;
- scroll - die Hintergrundbildlauf mit dem Rest der Elemente;
- lokalen - das Bild auf Hintergrund gescrollt wird, wenn Bildlauf ist der Inhalt.Hintergrund, der über den Inhalt geht befestigt ist.
Beispiel:
body {background-attachment fixiert}.
Derzeit Firefox unterstützt nicht die neuesten Immobilien (local).
Attribut background-origin
Dieses Attribut ist für die Positionierung des Elements verantwortlich.Browser früheren Versionen erfordern die Verwendung von Präfixen.Das Hotel selbst verfügt über drei Parameter:
- padding-box Positionen von der Kante der Hintergrund, während unter Berücksichtigung der Dicke des Rahmens;
- border-box Eigenschaften von der vorherigen unterscheidet, dass die Grenzlinie kann vollständig oder teilweise bedecken den Hintergrund;
- Bildinhalt-box Positionierung pryavyazyvaya deren Inhalt.
Wenn Sie mehrere Werte angeben, kann der Browser auf ihre eigene Weise zu reagieren: Firefox und Opera nehmen nur die erste Option.
Attribut background-repeat
In der Regel, wenn das Hintergrundbild angegeben ist, muss es horizontal oder vertikal wiederholt werden.Für diese und verwendet das Attribut background-repeat.So Blockhintergrund, CSS, die eine solche Eigenschaft enthält einen von mehreren Möglichkeiten:
- no-repeat - Bild auf der Seite in einem Formular angezeigt wird;
- Wiederholungs - Muster in x- und y wiederholt;
- repeat-x - nur horizontal;
- repeat-y - nur vertikal;
- Raum - Muster wiederholt, aber wenn der Raum nicht gefüllt ist, dann gibt es Lücken zwischen den Bildern;
- Rund - das Bild wird so skaliert, wenn sie nicht die gesamte Fläche gesamte Bild füllen.
Beispiel für Attribut:
body {background-repeat: no-repeat repeat} - ähnlich background-repeat: repeat-y.
In CSS3 kann Werte für mehrere Bilder festlegen, ob die Übertragungsparameter durch Komma getrennt.
Attribut background-clip
Dieses Attribut gibt das Verhalten der Hintergrund unter den Grenzen (zum Beispiel im Fall der gestrichelten Rahmen):
- padding-box - Hintergrund im Inneren des Blocks angezeigt wird;
- Grenzkasten - in den Geltungsbereich des Bildes;
- Content-box - das Bild auf den Hintergrund erscheint nur innerhalb der Inhalte.
Beispiel:
body {background-clip: Content-Box;}.
Chrom und Safari erfordern die Verwendung der Vorsilbe -webkit-.
Opazität Attribut und filtern
Opazität Attribut können Sie die Hintergrundtransparenz gesetzt - CSS-Eigenschaft wird in allen Browsern.Der Wert ist einstellbar von 0,0 bis 1,0 inklusive.Mit diesem können Sie die Transparenz des Hinter CSS ohne einen ganzzahligen Wert anstelle von 0,3 eingestellt ist genug, um 0,3 zu schreiben:
.block {background-image: url (img.png);Deckkraft: 0,3;}.
Um die Hintergrundtransparenz gesetzt ist, ist CSS auch für IE unter dem neunten Ausführung geeignet, verwenden Sie den Attributfilter:
.block {background-image: url (img.png);Filter: alpha (Deckkraft = 30);}.
In diesem Fall wird die Trübung zwischen 0 und 100. Beachten Sie, dass die Deckkraft zuschreiben verschiedene Transparenz-Einstellungen über RGBA Vererbung gesetzt: Opazität mit einem transparenten Hintergrund ist nicht nur, aber auch alle Einzelteile im Inneren des Gerätes.
immer sicher, dass die Browser-Nutzungsstatistiken der GUS und allen anderen Ländern.Das größte Problem aller DTP - ältere Versionen von IE, erlauben sie nicht die volle Nutzung des CSS3.Wenn das Layout vergessen Sie nicht, die besonderen Leistungen, die überprüfen, ob Ihr Browser ist eine Eigenschaft, CSS zu verwenden.Wenn Sie ältere Versionen der Browser nicht installiert haben, erhalten Sie den Service, der den Betrieb der Website in verschiedenen Browsern Online überprüft.
