In dieser Lektion werden wir uns solche ansehen CSS Eigenschaften - Opazität Und RGBA. Eigentum Opazität ist nur für die Transparenz der Elemente und die Funktion verantwortlich RGBA– für Farbe und Transparenz, wenn Sie den Transparenzwert des Alphakanals angeben.

CSS-Transparenz, Deckkraft

Digitaler Wert für Opazität wird im Bereich von 0,0 bis 1,0 eingestellt, wobei Null vollständige Transparenz und Eins im Gegenteil absolute Deckkraft bedeutet. Um beispielsweise eine Transparenz von 50 % zu sehen, müssen Sie den Wert auf 0,5 einstellen. Das muss man bedenken Opazität wird an alle untergeordneten Elemente des übergeordneten Elements weitergegeben. Das bedeutet, dass auch Text auf einem durchscheinenden Hintergrund durchscheinend ist. Und das ist ein ganz wesentlicher Nachteil: Der Text kommt nicht so gut zur Geltung.

Der Screenshot zeigt deutlich, dass der schwarze Text ebenso durchscheinend geworden ist wie der blaue Hintergrund.

Div (
Hintergrund: URL(images/yourimage.jpg); /* Hintergrundbild */
Breite: 750px;
Höhe: 100px;
Rand: automatisch;
}
.Blau(
Hintergrund: #027av4; /* Durchscheinende Hintergrundfarbe */
Deckkraft: 0,3; /* Hintergrundtransluzenzwert */
Höhe: 70px;
}
h1 (
Polsterung: 6px;
Schriftfamilie: Arial Black;
Schriftstärke: fetter;
Schriftgröße: 50px;
}

CSS-Transparenz im RGBA-Format

Format zum Aufzeichnen von Farbe RGBA ist eine modernere Alternative für die Immobilie Opazität. R (rot), G (grün), B (blau)- bedeutet: rot, grün, blau. Letzter Buchstabe A– bedeutet Alphakanal, der die Transparenz festlegt. RGBA im Gegensatz zu Opazität wirkt sich nicht auf untergeordnete Elemente aus.

Schauen wir uns nun unser Beispiel mit an RGBA. Ersetzen wir diese Zeilen in den Stilen.

Hintergrund: ##027av4; /* Hintergrundfarbe */
Deckkraft: 0,3; /* Hintergrundtransluzenzwert */

zur nächsten Zeile

Hintergrund: rgba(2, 127, 212, 0.3);

Wie Sie sehen, ist der Transparenzwert von 0,3 bei beiden Methoden gleich.

Ergebnis des RGBA-Beispiels:

Der zweite Screenshot sieht viel besser aus als der erste.

Indem Sie mit der Transparenz des Hintergrunds von Blöcken spielen, können Sie interessante Effekte auf Ihrer Website erzielen. Es ist wichtig, dass diese durchscheinenden Blöcke auf einem farbenfrohen Motiv, beispielsweise einem Foto, platziert werden. Nur in diesem Fall wird der Effekt spürbar sein. Diese Technik wurde schon lange im Design eingesetzt, noch bevor überhaupt eine solche Technik auf den Markt kam CSS3, es wurde rein in Grafikprogrammen umgesetzt.

Wenn der Kunde verlangt, dass das Layout in älteren Versionen des Browsers gut aussieht Internet Explorer , und fügen Sie dann die Eigenschaft hinzu Filter Und vergessen Sie nicht, den Code zu kommentieren, damit die Gültigkeit des Codes nicht beeinträchtigt wird.

Abschluss

Format RGBA unterstützt alle modernen Browser, außer Internet Explorer. Das ist auch sehr wichtig RGBA flexibel, es wirkt nur auf ein bestimmtes angegebenes Element, ohne Auswirkungen auf seine untergeordneten Elemente. Es ist klar, dass dies für den Layouter bequemer ist. Meine Wahl fällt definitiv für das Format aus RGBA zum Erhalten Transparenz in CSS.

Für eine bessere Konsolidierung des Materials und mehr Klarheit schlage ich vor, dass Sie es durchgehen.

Die CSS-Eigenschaft opacity ist für die Transparenz von Elementen (Bilder, Text, Blöcke) in HTML verantwortlich.

CSS-Deckkraftsyntax

Wobei value reale Werte im Bereich von 0,0 bis 1,0 annehmen kann. Ein Wert von 1,0 bedeutet keine Transparenz (Standard).

Beispiel Nr. 1. Transparentes Bild in HTML

Das erste Bild wird ohne Transparenz angezeigt, das zweite mit Transparenz 0,5

Elementtransluzenz

Machen Sie das Bild beim Schweben durchscheinend!

DemoDownload-Quellen

Vielen Dank für Ihre Aufmerksamkeit!

Nächster Artikel
Wie erstelle ich einen Div-Block mit Scrollen?

CSS-Transparenz – browserübergreifende Lösung - 3,8 von 5 basierend auf 6 Stimmen

In dieser Lektion befassen wir uns mit der CSS-Transparenz, lernen, wie wir verschiedenen Seitenelementen Transparenz verleihen und eine vollständige browserübergreifende Kompatibilität erreichen, d. h. dieser Effekt funktioniert in verschiedenen Browsern gleich.

So legen Sie die Transparenz eines beliebigen Elements fest

In CSS3 ist die Eigenschaft opacity für die Erstellung transparenter Elemente verantwortlich, die auf jedes Element angewendet werden kann. Diese Eigenschaft hat Werte von 0 bis 1, die den Grad der Transparenz bestimmen. Dabei steht 0 für volle Transparenz (der Standardwert für alle Elemente) und 1 für volle Deckkraft. Werte werden als Brüche geschrieben: 0,1, 0,2, 0,3 usw.

Anwendungsbeispiel:

Browserübergreifende Transparenz

Nicht alle Browser nehmen die oben genannte Deckkrafteigenschaft auf die gleiche Weise wahr und implementieren sie. In manchen Fällen ist es notwendig, einen anderen Eigenschaftsnamen oder andere Filter zu verwenden.

Die folgenden Ansichten unterstützen die CSS3-Opacity-Eigenschaft Mozilla-Browser 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

So gut :) Ein Browser wie Internet Explorer bis Version 9.0 unterstützt die Opazitätseigenschaft nicht und um Transparenz für diesen Browser zu erzeugen, müssen Sie die Filtereigenschaft und den Wert Alpha (Opacity=X) verwenden, wobei X eine ganze Zahl ist Der Bereich von 0 bis 100 bestimmt den Grad der Transparenz. 0 ist völlig transparent und 100 ist völlig undurchsichtig.

Hinsichtlich Firefox-Browser Vor Version 3.5 wird die Eigenschaft -moz-opacity anstelle von opacity unterstützt.

Browser wie Safari 1.1 und Konqueror 3.1, die auf der KHTML-Engine basieren, verwenden die Eigenschaft -khtml-opacity, um die Transparenz zu steuern.

Wie kann man die Transparenz in CSS so einstellen, dass sie in allen Browsern gleich aussieht? Um eine browserübergreifende Lösung für die Elementtransparenz zu erstellen, müssen sie nicht nur eine Opazitätseigenschaft, sondern den folgenden Satz von Eigenschaften angeben:

Filter: Alpha(Deckkraft=50); /* Transparenz für IE */ -moz-opacity: 0.5; /* Unterstützt Mozilla 3.5 und niedriger */ -khtml-opacity: 0.5; /* Unterstützt Konqueror 3.1 und Safari 1.1 */ opacity: 0.5; /* Unterstützt alle anderen Browser */

Transparenz verschiedener Elemente

Schauen wir uns einige Beispiele für die Einstellung der Transparenz an bestimmte Elemente, die auf der Seite am häufigsten verwendet werden.

CSS-Bildtransparenz.

Schauen wir uns mehrere Möglichkeiten zum Erstellen eines durchscheinenden Bildes an. Im folgenden Beispiel ist für das erste Bild keine Transparenz festgelegt, für das zweite eine Transparenz von 50 % und für das dritte Bild eine Transparenz von 30 %.

Ergebnis:

Transparenz in CSS, wenn Sie mit der Maus über ein Bild fahren.

Dies ist oft notwendig transparentes Bild oder irgendein anderes Element in dem Moment, in dem sich der Cursor darüber befindet. Dies kann mit erfolgen CSS-Hilfe Pseudoklasse:hover. Dazu müssen unserem Bild zwei Klassen zugewiesen werden, eine normale – das ist der inaktive Zustand des Bildes und die zweite Klasse mit der Pseudoklasse: hover, hier müssen Sie die Transparenz des Bildes im Moment angeben des Bewegens des Cursors.

Das Ergebnis können Sie in der Demo sehen.

Hintergrundtransparenz mit CSS.

Dabei ist zu beachten, dass die Transparenz für alle verschachtelten Elemente gilt und diese keine größere Transparenz als das verschachtelte Element haben können.

Als Beispiel geben wir eine Variante mit einem Seitenhintergrund, der aus einem Bild erstellt wurde, und einen Block mit einem Hintergrund, der aus Farbe erstellt wurde und eine Transparenz von 50 % aufweist.

Beispielcode:

Text

Hier ist das Ergebnis des oben geposteten Codes:

orem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der Standard-Scheintext der Branche, als ein unbekannter Drucker eine Galeere mit Schriften nahm und daraus ein Musterbuch für Schriften herstellte. Es hat nicht nur fünf Jahrhunderte überdauert, sondern auch den Sprung in den elektronischen Schriftsatz Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngerer Zeit mit Desktop-Publishing-Software wie Aldus PageMaker, einschließlich Versionen von Lorem Ipsum, populär gemacht.
Es ist eine seit langem bekannte Tatsache, dass ein Leser beim Betrachten des Layouts durch den lesbaren Inhalt einer Seite abgelenkt wird. Der Sinn der Verwendung von Lorem Ipsum besteht darin, dass es im Gegensatz zur Verwendung von „Inhalt hier, Inhalt hier“ eine mehr oder weniger normale Buchstabenverteilung aufweist, wodurch es wie lesbares Englisch aussieht. Viele Desktop-Publishing-Pakete und Webseiten-Editoren verwenden mittlerweile Lorem Ipsum als Standardtextmodell, und eine Suche nach „Lorem Ipsum“ wird viele Websites entdecken, die noch in den Kinderschuhen stecken. Im Laufe der Jahre haben sich verschiedene Versionen herausgebildet, manchmal zufällig, manchmal absichtlich (mit eingespritztem Humor und dergleichen).

Heute werden wir darüber reden Transparenz in HTML Seiten. Sie sind wahrscheinlich schon auf transparente Popup-Blöcke gestoßen, sei es eine Fotogalerie oder Anmeldeformulare auf einer beliebten Website. Es gibt viele Verwendungsmöglichkeiten für Transparenz in HTML. Wie wird es hergestellt und wo kann es verwendet werden?

Lassen Sie uns zunächst verstehen, dass unser Dokument nicht nur eine Monitorebene hat – es ist im Allgemeinen dreidimensional, ich habe dies im Artikel „Z-Index“ erwähnt. Dementsprechend würde selbst eine vollständig transparente Schicht, wenn sie sich oben im Anzeigestapel befände, den Zugriff auf andere Elemente blockieren. Dies ist eine der Hauptanwendungen transparenter Blöcke. Obwohl normalerweise ein Schattierungseffekt verwendet wird, funktioniert eine vollständig transparente Ebene genauso. So funktionieren beispielsweise viele beliebte Fotogalerien; es wird eine schattierte Ebene organisiert, in der Fotos und Steuerelemente dafür angezeigt werden. Der Rest der Seite ist mit einer (halb)transparenten Schicht „bedeckt“, die den Zugriff auf alle anderen Elemente auf der Seite blockiert. Diese. Sie können die Seite nicht verlassen, indem Sie auf einen Link klicken – der gesamte Text wird mit einem Hintergrund abgedeckt. Um zum Hauptteil der Website zurückzukehren, bieten sie normalerweise Steuerelemente zum Schließen der Galerie, zum Anmeldeformular usw. Steuern Sie das Ein-/Ausblenden transparenter Blöcke mit mit Javascript. Leider gibt es keine Alternative dazu. Ohne die Verwendung sieht der Benutzer den transparenten Block entweder überhaupt nicht oder kann ihn nicht schließen, ohne die aktuelle Seite zu verlassen. Ich stelle fest, dass hierfür Sichtbarkeits- oder Anzeigeeigenschaften verwendet werden.

Wie ist Transparenz eigentlich in HTML organisiert? Die Einstellung der Elementtransparenz ist im Allgemeinen nicht in der CSS-Spezifikation enthalten, sodass Sie zum Erstellen mehrere Anweisungen gleichzeitig verwenden müssen. Einige Browser (z. B.) funktionieren mit einer Option, andere mit einer anderen. Dh nutzt die eingebaute Filterfunktionalität, andere Browser nutzen die Eigenschaft „Opacity“, die im Bereich von 0 (völlig transparentes Objekt) bis 1 (völlig undurchsichtig) eingestellt ist. Bei einer Transparenz von 30 % sollten Sie beispielsweise schreiben „ Deckkraft:0,30; filter:alpha(opazität=30);". Die Eigenschaften sind, wie aus dem Beispiel hervorgeht, ähnlich - nur wird im ersten Fall eine Zahl von 0 bis 1 verwendet, im zweiten Fall wird eine Prozentschreibweise verwendet. Ein Beispiel für einen solchen Block:

<div-Stil = "position:absolute; oben: 0; links: 0; Hintergrundfarbe:rgb(18, 114, 214); Breite:100%; id = "VideoFrame" >

Das Beispiel verwendet einen Videoanzeigeblock, der aktiviert wird, wenn Sie auf das Video-Thumbnail klicken. Die Höhe des Blocks ist nicht angegeben, da diese je nach Bildschirmgröße und Seiteninhalt variieren kann. Daher wird es beim Öffnen eines Videos dynamisch berechnet. Ein Beispiel für die Verwendung dieser Technik ist auf der Hauptseite der Website ruscircus.ru zu sehen, an der ich einmal gearbeitet habe.

Das ist tatsächlich das ganze Geheimnis der Transparenz in HTML. Wir verwenden Z-Index und Deckkraft, um einen transparenten Effekt zu erzielen. Und dafür finden Sie viele Anwendungsmöglichkeiten – hier sind Ihnen nur durch Ihre Vorstellungskraft Grenzen gesetzt.

08.02.2013 Ich werde die in den Kommentaren gestellten Fragen beantworten, nämlich wie man auf einem transparenten Block einen undurchsichtigen Block herstellt. Hier ist alles einfach, nicht umsonst habe ich im Material einen Link zu Material über den Z-Index angegeben. Sie müssen einen weiteren Block mit einem höheren Z-Index als dem transparenten erstellen. Jetzt habe ich in wenigen Minuten ein Beispiel skizziert. Blöcke:

<div-Stil = "Position:absolut; oben: 0; links: 0; Hintergrundfarbe:rgb(18, 114, 214); Breite:100%; Höhe:100%; Deckkraft:0,30; filter:alpha(opazität=30); Sichtbarkeit:versteckt; z-index:1;" id = "VideoFrame" > <div id = „VideoFrame2“ style = "position:absolut; oben: 25 %; links: 25 %; Hintergrundfarbe: weiß; Breite: 50 %; Höhe: 50 %; Deckkraft: 0,99; filter:alpha(opazität=99); Sichtbarkeit:versteckt; z-index:2;" onclick = "javascript:HideForm();" > Hier schreiben wir den Text</div>

Und Javascript-Funktionen

< script type= "text/javascript" >Funktion ShowForm() ( document.getElementById ("VideoFrame") .style .visibility = "visible" ; document.getElementById ("VideoFrame2" ) .style .visibility = "visible" ; ) function HideForm() ( document.getElementById (" VideoFrame" ) .style .visibility = "hidden" ; document.getElementById ("VideoFrame2") .style .visibility = "hidden" ; )

Die erste Funktion zeigt einen transparenten Block (zusammen mit einem undurchsichtigen Textblock) an – er kann an eine Schaltfläche gebunden werden. Link usw. Die zweite Funktion, die ich habe, ist an einen Mausklick auf einen Block mit Text gebunden – sie verbirgt den transparenten Block.

Ich hoffe, ich habe etwas Klarheit darüber geschaffen, wie das funktioniert. Wenn nicht, stellen Sie Fragen.

Transparenz in CSS ist in letzter Zeit eine ziemlich trendige Technik, die bei der browserübergreifenden Implementierung Schwierigkeiten bereitet. Es gibt noch keine universelle Methode, mit der sich Transparenz für alle Browser realisieren lässt. In letzter Zeit hat sich die Situation jedoch deutlich verbessert.

Dieser Artikel bietet einen detaillierten Blick auf bestehende Ansätze sowie Codebeispiele und Erklärungen, die Ihnen helfen, mit minimalem Aufwand in allen Browsern das gleiche Ergebnis zu erzielen.

Erwähnenswert ist, dass Transparenz zwar schon seit mehreren Jahren existiert, aber nie Teil des CSS-Standards war. Dies ist eine nicht standardmäßige Eigenschaft, die Teil der CSS3-Spezifikation sein sollte.

Alter Ansatz

In älteren Versionen von Firefox und Safari müssen Sie die Eigenschaft wie folgt anwenden:

#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )

Die Eigenschaft -khtml-opacity wurde in älteren Versionen von Webkit-Browsern verwendet. Diese Eigenschaft ist veraltet und wird nicht mehr benötigt, es sei denn, Sie sind sicher, dass ein erheblicher Teil des Datenverkehrs auf Ihrer Website von Besuchern stammt, die Safari 1.x verwenden, was natürlich unwahrscheinlich ist.

Die nächste Zeile verwendet die Eigenschaft -moz-opacity, die in sehr frühen Versionen der Mozilla-Engine funktionierte. Firefox unterstützt dies seit Version 0.9 nicht mehr.

CSS-Transparenz in Firefox, Safari, Chrome und Opera

Für die meisten modernen Browser reicht es aus, die folgende Eigenschaft zu verwenden:

#myElement ( Deckkraft: .7; )

Im obigen Beispiel ist das Element auf 70 % Deckkraft (30 % Transparenz) eingestellt. Das heißt, wenn wir den Wert auf Eins setzen, ist das Element undurchsichtig, und wenn wir diesen Wert auf Null setzen, wird es dementsprechend unsichtbar.

Die Opazitätseigenschaft verarbeitet 2 Dezimalstellen. Das heißt, der Wert „.01“ weicht vom Wert „.02“ ab, obwohl dies nicht auffällt.

CSS-Transparenz für Internet Explorer

Wie üblich ist Internet Explorer nicht mit anderen Browsern kompatibel. Darüber hinaus sind mittlerweile drei Versionen dieses Browsers ziemlich weit verbreitet, wobei die Transparenzeinstellung in jeder Version unterschiedlich ist und manchmal zusätzlichen Aufwand erfordert, um ein positives Ergebnis zu erzielen.

#myElement ( filter: alpha(opacity=40); )

In diesem Beispiel wird die Filtereigenschaft verwendet, die in den Versionen 6–8 funktioniert. Für die Versionen 6 und 7 gibt es jedoch eine Einschränkung: Die Eigenschaft hasLayout des Elements muss auf true gesetzt sein. Diese Eigenschaft ist nur im IE vorhanden und Sie können mehr darüber beispielsweise auf Habré lesen.

Eine andere Möglichkeit, Transparenz mithilfe von CSS in IE8 festzulegen, besteht darin, den folgenden Ansatz zu verwenden (beachten Sie die Kommentare):

#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* funktioniert in IE6, IE7 und IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * nur für IE8 */ )

Die erste Zeile funktioniert in allen derzeit verwendeten Versionen, die zweite nur in IE8. Beachten Sie, dass die zweite Zeile das Präfix -ms- verwendet und der Wert in Anführungszeichen steht.

Festlegen und Ändern der CSS-Transparenz mit JavaScript oder jQuery

Sie können den folgenden Code verwenden, um die Transparenz festzulegen:

Document.getElementById("myElement").style.opacity = ".4"; // für die meisten Browser document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // für IE

In diesem Fall ist es natürlich viel einfacher, jQuery zu verwenden, außerdem funktioniert es in allen Browsern:

$("#myElement").css(( Deckkraft: .4 )); // funktioniert in allen Browsern

Sie können diese Eigenschaft animieren:

$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animation ist abgeschlossen; dieser Code funktioniert in allen Browsern. ));

RGBA-Funktion

CSS3 plant die Unterstützung von Alphakanälen mithilfe der RGBA-Funktion. Diese Funktion funktioniert in Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Es wird wie folgt verwendet:

#rgba (Hintergrund: rgba(98, 135, 167, .4); )

In diesem Fall gibt der letzte Parameter den Grad der Deckkraft an.

HSLA-Funktion

Ähnlich wie bei der vorherigen Funktion können Sie mit CSS3 auch eine halbtransparente Farbe mithilfe der HSLA-Funktion festlegen, deren Parameter Farbton, Sättigung, Helligkeit und Alphakanal sind.

#hsla (Hintergrund: hsla(207, 38%, 47%, .4); )

Ein wichtiger Punkt bei der Verwendung der RGBA- und HSLA-Funktionen besteht darin, dass die Transparenzeinstellung nicht auf untergeordnete Elemente angewendet wird, während die Verwendung der Opazitätseigenschaft vererbt wird.