Heute wird das Design der Websiteechte Kunst. Es ist nicht nur ein Satz von Seitenelementen einer bestimmten Farbe und Größe, Fonts verschiedener Stile und thematischer Zeichnungen. Um die Website von anderen zu unterscheiden, um die Aufmerksamkeit der Besucher auf sich zu ziehen und sie auf diese oder andere Elemente zu lenken, wird eine große Anzahl von Methoden und Werkzeugen verwendet. Unter ihnen gibt es eine sehr beliebte Eigenschaft css - Transparenz. Diese Technik ist ziemlich modisch und effektiv und wird deshalb oft benutzt. Sie können verschiedenen Objekten auf der Site-Seite Transparenz verleihen, z. B. Text, ganzer Block oder Bild. Es wird auch in vielerlei Hinsicht erreicht. Lassen Sie uns sie unten betrachten.
Parameter zum Definieren der Transparenz von Elementen
Parameter, die es erlauben, den Grad zu regulierenTransparenz der Elemente, ein paar. Sie werden abhängig von bestimmten Zwecken verwendet, sowie vom Browser, unter dem das Design "angepasst" wird. Dazu gehören die folgenden Eigenschaften:
- Opazität;
- Filter;
- PNG-Bild als Hintergrund.
Die Werte der CSS-Eigenschaft "Transparenz" ändern sichwie folgt: Je größer die Ziffer, desto niedriger die Transparenzstufe des Elements. In der Deckkraft variiert es von 0 bis 1, in Filter - von 10 bis 100. Und Letzteres wird für den Browser Interet Explorer verwendet, und für alle anderen wird die Opazität -Eigenschaft verwendet.
Transparenz des Bildes (Veränderung)
Beginnen wir mit der Option, wenn die Transparenz angezeigt wird, wenn Sie den Mauszeiger über das Element bewegen.
Überlegen Sie, wie Sie die Transparenz eines Bildes festlegen. CSS bietet zwei Optionen. Dafür ist es notwendig, es direkt in den Code des HTML-Dokuments wie folgt zu schreiben:
- Geben Sie den Pfad zum Bild an.
- Ermitteln Sie die Transparenzeinstellungen, wenn Sie den Mauszeiger über den Cursor bewegen und no. Dazu verwenden wir die Eigenschaften onmouseover und onmouseout, in denen wir die Opazitäts- und Filterwerte festlegen.
Dieselben Eigenschaften können in das css-Dokument geschrieben werden, und im Quellcode wird nur ein Link hinzugefügt. Die Ergebnisse sind gleich.
Transparenz von Text und Seitenblöcken
Wie für den Text oder Block (Transparenz Div),css schlägt vor, eine Option zu verwenden, die der Erzeugung der Transparenz des Bildes ähnlich ist, dh eine verbundene CSS-Datei verwendet, in der die gewünschten Parameter eingestellt werden. Sie können auf eine einfachere Weise gehen. Wenn Sie die Stile des div-Stilblocks oder des p-Textes angeben, schreiben Sie den folgenden HTML-Code für die Elemente onmouseover und onmouseout vor. Beide Optionen funktionieren und geben das gewünschte Ergebnis.
Transparenz konstant
In einigen Fällen muss die Transparenz eines Objekts, eines Designelements oder eines Textes fortlaufend festgelegt werden. In dieser Situation ist die Lösung noch einfacher als wenn Sie den Mauszeiger bewegen.
Für das CSS-Element wird Transparenz angegebenmit dem folgenden Code. Im div-Style-Block werden Werte für Hintergrund (z. B. # ff8800), Opazität (z. B. 0,5) sowie Breite und Füllung zugewiesen.
Für das Bild im Code geben wir die Werte für Deckkraft und Filter ein und geben den Pfad zum Bild an.
RGBA-Methode
Es gibt andere AnwendungenDiese Eigenschaft css: transparency kann auf die Hintergrundfarbe eines beliebigen Designelements angewendet werden. Dazu wird die RGBA-Methode verwendet. Die ersten drei Buchstaben geben die Grundfarben an (rot, fest, blau), und die letzte - alpha - die Transparenz. Geben Sie im RGBA-Format den Grad der Transparenz an und geben Sie diesen in der letzten Ziffer an. Zum Beispiel ist dies der Fall: Hintergrund: rgba (240,2,33,0,4035).
Fazit
Also, im Laufe der Arbeit zu verwendenSite-Design ist einfach, aber die spektakuläre Eigenschaft css "Transparenz", können Sie ihre Elemente mit einem Minimum an Aufwand interessanter und sichtbarer machen. Die beschriebenen Optionen zur Angabe von Transparenzmerkmalen helfen Ihnen dabei.
