681 Shares 6792 views

CSS-Hintergrundtransparenz. Transparenter Hintergrund oder Text mit CSS

Mit dem Aufkommen von CSS3 ist die Arbeit von Layoutdesignern in vielerlei Hinsicht viel einfacher und logischer geworden: Schließlich können Sie nun ein Objekt wirklich flexibel konfigurieren, um so weniger oft mit JavaScript. Angenommen, Sie müssen die Hintergrundtransparenz anpassen – CSS bietet sofort mehrere Möglichkeiten an.

Der Hintergrund wird durch einen Satz von Attributen (Hintergrundbild, Hintergrundposition, Hintergrundgröße, Hintergrundwiederholung, Hintergrund-Anhang, Hintergrund-Ursprung, Hintergrund-Clip, Hintergrundfarbe) eingestellt, die jeweils separat geschrieben oder unter dem Attribut kombiniert werden können Hintergrund. Lassen Sie uns jeden von ihnen genauer analysieren.

Das Hintergrund-Farbattribut

In CSS können Sie die Hintergrundfarbe auf verschiedene Arten angeben: mit Hexadezimalcode, einem Farbnamen oder einem RGB-Datensatz. In CSS3 wurde es möglich, die RGBA-Option anstelle des RGB-Datensatzes zu verwenden.

Der hexadezimale Farbcode wird nach dem Raster in die Eigenschaft geschrieben: background-color: # FFDAB9. Wenn die Zeichen im selben Eintrag paarweise übereinstimmen, wird der Code in der Regel etwas verkürzt: # ccff00 kann als # cf0 geschrieben werden:

Körper {Hintergrundfarbe: # cf0;}.

Der Name ist sogar in den exotischsten Blumen. Zum Beispiel können Sie neben dem Standard Rot und Weiß NavajoWhite (#FFDEAD) oder Honeydew2 (# E0EEE0) verwenden:

Körper {Hintergrundfarbe: lila;}.

Die letzte Version des RGB- oder RGBA-Datensatzes erlaubt Ihnen, nicht nur die Farbe, sondern auch die Transparenz des CSS-Hintergrunds anzugeben, aber die Methode arbeitet im IE nur über Version 9. Andere Browser erkennen normalerweise die Option mit Transparenz. Nach W3C-Standards ist es vorzuziehen, RGBA anstelle des üblicheren RGB zu verwenden.

Der letzte Wert für RGBA und setzt die Deckkraft des Hintergrunds von 0 (transparent) auf 1 (opak).

Es gibt noch mehr ungewöhnliche Bedeutungen. Die Hintergrundfarbe kann mit HSL und HSLA eingestellt werden. Beide wurden zu CSS3 hinzugefügt, und daher wird IE nicht unter Version 9 unterstützt. Die Optionen sind identisch mit RGB oder RGBA, nur in einem anderen Format: Farbton (der Farbton ist der Wert auf dem Farbrad, wird in Grad gesetzt), Sättigung (die Intensität ist der Prozentsatz der Farbe, in Prozent von 0 bis 100), Helligkeit (Helligkeit wird auf die gleiche Weise gemessen wie der Parameter Sättigung ).

Das Hintergrundbild-Attribut

Die meisten Cross-Browser-Version des transparenten Hintergrundes ist die Verwendung des Bildes. In CSS3 kannst du auch ein paar Bilder angeben, dies geschieht durch ein Komma. Beispiel:

Körper {Hintergrundbild: url (bg1.png), url (bg2.png)}.

Diese Methode unterstützt auch IE8. Mehrere Bilder als Hintergrund werden für die Gummi-Auflagerung verwendet. Die Hauptsache, vergessen Sie nicht, wenn Sie ein Bild verwenden, um auch die Hintergrundfarbe in CSS zu setzen, da Benutzer einfach das Bild nicht booten können.

Das Hintergrund-Positionsattribut

Wenn Sie ein Bild verwenden, um den Hintergrund des Blocks anzugeben, können Sie mit CSS das Bild überall auf dem Bildschirm positionieren. Standardmäßig befindet sich das Bild in der oberen linken Ecke. Das Attribut nimmt entweder mündliche Anweisungen (oben, unten, links, rechts) oder numerisch (Prozentsätze, Pixel und andere Maßeinheiten). In diesem Fall müssen Sie zwei Werte angeben: horizontal und vertikal:

Body {background-position: right center;} – In diesem Beispiel wird der Hintergrund auf der rechten Seite der Seite sein, wobei der Boden und die Oberseite der Distanz zum Bild gleich sind.

Das Attribut "background-size"

Manchmal möchten Sie CSS verwenden, um den Hintergrund zu dehnen oder seine Größe zu reduzieren. Verwenden Sie dazu die Attribut-Hintergrundgröße, und die Hintergrundgröße kann in Pixeln oder Prozentsätzen und in beliebigen anderen Maßeinheiten angegeben werden.

Mit diesem Attribut gibt es einige Probleme: Für die korrekte Darstellung des Hintergrundes in den frühen Versionen von Browsern ist es notwendig, Präfixe zu verwenden. Natürlich unterstützen die aktuellen Versionen dieses Attribut und die Notwendigkeit für spezifische Eigenschaften ist verschwunden.

Das Attribut "Hintergrund-Anhang"

Dieses Attribut gibt das Verhalten des Hintergrundbildes beim Scrollen an. So kann es 3 Werte (ohne Berücksichtigung der Erben, gemeinsam für alle Attribute in diesem Artikel vorgestellt):

  • Fixed – macht ein Bild auf den Hintergrund eines festen;
  • Scrollen – der Hintergrund rollt zusammen mit dem Rest der Elemente;
  • Lokal – das Bild auf dem Hintergrund blättert, wenn die Rolle Inhalt hat. Ein Hintergrund, der über den Inhalt hinausgeht, ist behoben.

Anwendungsbeispiel:

Körper {Hintergrund-Anhang fixiert}.

Derzeit unterstützt Firefox die letzte Eigenschaft (lokal) nicht.

Das Hintergrund-Ursprung-Attribut

Dieses Attribut ist für die Positionierung des Elements verantwortlich. Browser von frühen Versionen erfordern die Verwendung von Präfixen. Die Eigenschaft selbst hat drei Parameter:

  • Padding-Box positioniert den Hintergrund in Bezug auf die Kante unter Berücksichtigung der Dicke des Rahmens;
  • Die Randbox unterscheidet sich von der vorherigen Eigenschaft dadurch, dass die Grenzlinie den Hintergrund ganz oder teilweise abdecken kann;
  • Die Content-Box positioniert das Bild und dreht sie auf den Inhalt.

Wenn mehrere Werte angegeben sind, können die Browser auf ihre eigene Weise reagieren: Firefox und Opera nehmen nur die erste Option wahr.

Das Hintergrund-Wiederholungsattribut

In der Regel, wenn der Hintergrund durch das Bild angegeben wird, muss es horizontal oder vertikal wiederholt werden. Dazu wird das Attribut background-repeat verwendet. Also, der Hintergrund eines Blocks, dessen CSS eine solche Eigenschaft enthält, kann einen von mehreren Parametern haben:

  • No-repeat – das Bild erscheint auf der Seite in einer einzigen Variante;
  • Wiederholen – der Hintergrund wird entlang der x- und y-Achsen wiederholt;
  • Wiederholung-x – nur horizontal;
  • Wiederholen-y – nur vertikal;
  • Raum – der Hintergrund wird wiederholt, aber wenn Platz nicht gefüllt ist, erscheinen Bilder zwischen den Bildern;
  • Runde – das Bild ist skaliert, wenn man nicht die ganze Fläche mit ganzen Bildern füllen kann.

Ein Beispiel für die Verwendung eines Attributs:

Körper {Hintergrund-Wiederholung: keine Wiederholung wiederholen} – ähnlich Hintergrund-Wiederholung: Wiederholung-y.

In CSS3 können Sie Werte für mehrere Bilder angeben, wenn Sie Parameter mit einem Komma auflisten.

Das Hintergrund-Clip-Attribut

Dieses Attribut definiert das Hintergrundverhalten unter den Grenzen (z. B. bei punktierten Frames):

  • Padding-Box – der Hintergrund wird streng im Block angezeigt;
  • Border-Box – das Bild kommt unter Frames;
  • Content-Box – das Bild auf dem Hintergrund erscheint nur innerhalb des Inhalts.

Anwendungsbeispiel:

Körper {Hintergrund-Clip: Inhalt-Box;}.

Chrom und Safari erfordern die Verwendung des -webkit-Präfixes.

Die Deckkraft und Filterattribute

Mit dem Opacity-Attribut können Sie die Transparenz des Hintergrunds einstellen – die CSS-Eigenschaft wird in allen Browsern funktionieren. Der Wert ist von 0,0 bis einschließlich 1,0 eingestellt. Dabei können Sie die Hintergrundtransparenz von CSS einstellen Ohne einen ganzzahligen Wert: anstelle von 0.3 genügt es zu schreiben .3:

.block {background-image: url (img.png); Deckkraft: .3;}.

Um die Transparenz des Hintergrundes einzustellen, dessen CSS auch für IE unterhalb der neunten Version geeignet ist, verwenden Sie das Filterattribut:

.block {background-image: url (img.png); Filter: alpha (opacity = 30);}.

In diesem Fall wird der Opacity-Wert von 0 bis 100 gesetzt. Beachten Sie, dass sich das Opacity-Attribut von der Transparenzeinstellung mit der RGBA-Vererbung unterscheidet: Bei der Verwendung von Deckkraft wird nicht nur der Hintergrund transparent, sondern auch alle Elemente im Block sind transparent.

Befolgen Sie immer die Statistiken über die Verwendung von Browsern in der GUS und allen anderen Ländern. Das größte Problem für alle Layout-Hersteller ist die alte Version von IE, sie erlauben Ihnen nicht, CSS3 in vollen Zügen zu verwenden. Wenn Sie Layout machen, vergessen Sie nicht, spezielle Dienste zu verwenden, die überprüfen, ob Ihr Browser eine CSS-Eigenschaft unterstützt. Wenn Sie ältere Versionen von Browsern nicht installieren können, finden Sie einen Service, der den Betrieb der Website in verschiedenen Browsern online testen wird.