So legen Sie Transparenz in CSS fest – transparenter Block. CSS-Transparenz – browserübergreifende Lösung. Reibungslose Änderung der Elementtransparenz

Der durchscheinende Effekt eines Elements ist im Hintergrundbild deutlich sichtbar und hat sich in verschiedenen Bereichen weit verbreitet Betriebssysteme weil es stilvoll und schön aussieht. Die Hauptsache ist, dass unter den durchscheinenden Blöcken kein monochromatisches Muster entsteht, sondern ein Bild; in diesem Fall macht sich die Transparenz bemerkbar.

Dieser Effekt wird auf verschiedene Weise erzielt, einschließlich altmodischer Methoden wie der Verwendung eines PNG-Bilds als Hintergrund, der Erstellung eines karierten Bilds und der Opazitätseigenschaft. Aber sobald die Notwendigkeit besteht, einen Boden im Block zu schaffen transparenter Hintergrund, diese Methoden haben unangenehme Nachteile.

Schauen wir uns die Transluzenz von Text und Hintergrund an – wie man sie beim Website-Design richtig einsetzt:

Das Hauptmerkmal dieser Eigenschaft besteht darin, dass sich der Transparenzwert auf alle darin enthaltenen untergeordneten Elemente auswirkt, nicht nur auf den Hintergrund. Das bedeutet, dass sowohl der Hintergrund als auch der Text durchscheinend werden. Sie können die Transparenz erhöhen, indem Sie den Deckkraftbefehl von 0,1 auf 1 ändern.

HTML 5 CSS 3 IE 9 Deckkraft Körper (Hintergrund: url(images/cat.jpg); ) div ( Deckkraft: 0,6; Hintergrund: #fc0; /* Hintergrundfarbe */ Innenabstand: 5px; /* Ränder um den Text */ ) Erstellung und Förderung von Websites im Internet

Im Webdesign kommt auch Teiltransparenz zum Einsatz und wird durch das RGBA-Farbformat erreicht, das nur für den Hintergrund des Elements festgelegt wird.

Normalerweise sollte in einem Design nur der Hintergrund eines Elements durchscheinend sein und der Text sollte undurchsichtig sein, um die Lesbarkeit zu gewährleisten. Die Opazitätseigenschaft ist hier nicht geeignet, da der Text innerhalb des Elements ebenfalls teilweise transparent ist. Am besten verwenden Sie das RGBA-Format, das über einen Alphakanal, also einen Transparenzwert, verfügt. Der Wert wird rgba geschrieben, dann werden die Werte der roten, blauen und grünen Farbkomponenten durch Kommas getrennt in Klammern aufgeführt. Zuletzt gibt es die Transparenz, die von 0 bis 1 eingestellt werden kann, wobei 0 volle Transparenz und 1 Farbopazität bedeutet – die Syntax für die Verwendung von RGBA.

Halbtransparenter Hintergrund HTML 5 CSS 3 IE 9 RGBA-Körper (Hintergrund: URL(images/cat.jpg);) Div (Hintergrund: RGBA(0, 170, 238, 0.4); /* Hintergrundfarbe */ Farbe: #fff ; / * Textfarbe */ Innenabstand: 5px; /* Ränder um den Text */ ) Erstellung und Förderung von Websites im Internet. Die Hintergrunddeckkraft ist auf 90 % eingestellt – halbtransparenter Hintergrund und undurchsichtiger Text.

Um die Transparenz von Seitenelementen zu steuern, verwenden Sie die CSS-Eigenschaft opacity. Laut Spezifikation gilt es für jeden Knotentyp und wird in allen modernen Browsern unterstützt. Mit seiner Hilfe können Sie ein interessantes Design erstellen oder eine komfortable interaktive Benutzerinteraktion implementieren.

Die Syntax für die Opazitätseigenschaft in CSS sieht folgendermaßen aus:

Selektor (Deckkraft: 1; ) Selektor (Deckkraft: 0; ) Selektor (Deckkraft: 0,4; )

Die Eingabe akzeptiert numerische Werte im Bereich von 0 bis 1. Der Parameter kann Brüche von Eins darstellen, während in CSS ein Punkt als Trennzeichen für die ganzzahligen und gebrochenen Teile verwendet wird.

Ein Element ohne Transparenz wird unsichtbar, nimmt aber weiterhin seinen Platz auf der Seite ein und behält die Fähigkeit, mit dem Benutzer zu interagieren.

Wenn der Eigenschaftswert ungleich Null ist, wird die tatsächliche Transparenz als Prozentsatz einer Obergrenze berechnet. Im Normalfall bestimmt Opazität: 1 die vollständige Opazität des Elements.

Wenn das Element jedoch ein übergeordnetes Element hat, dessen Transparenz eine andere als eins ist, ändert sich die Berechnung. Ein Nachkomme kann nicht „weniger transparent“ sein als jeder seiner Vorfahren. Der Wert der CSS-Eigenschaft „Opacity“ des übergeordneten Blocks wird zur Obergrenze der Opazität des untergeordneten Knotens.

Übergeordnetes Element (Deckkraft: 0,7; ) untergeordnetes Element (Deckkraft: 1; )

In dieser Situation ist das untergeordnete Element zu 30 % transparent, obwohl der Deckkraftwert eins beträgt.

Beispiel 1: Transluzenz. Es ist notwendig, dass der Haupthintergrund des Blocks unter dem Zielelement sichtbar ist.

Ziel (Hintergrund: Schwarz; Deckkraft: 0,5;)

Nicht nur der Hintergrund des Zielblocks wird durchscheinend, sondern auch der Text.

Beispiel 2: Dynamische Transparenzsteuerung. Der Wert der CSS-Opazitätseigenschaft des Zielblocks ändert sich, wenn Sie mit der Maus darüber fahren.

Ziel (Deckkraft: 0,2;) .target:hover (Deckkraft: 1;)

Das letzte Beispiel zeigt das transparente Elemente Reagieren Sie weiterhin auf Seitenereignisse wie Hover. Dies ermöglicht Ihnen die Verwendung von Javascript zur Steuerung der CSS-Opazitätseigenschaft sowie die Verwendung von Übergangs- und Animationsmechanismen, um den Anzeigemodus reibungslos zu ändern.

Um über ein Skript auf Transparenz zuzugreifen, müssen Sie auf das Stilobjekt eines bestimmten Elements zugreifen.

// Den aktuellen Transparenzwert abrufen var opacity = element.style.opacity; // einen neuen Wert setzen element.style.opacity = 0.4;

Das sanfte Verschwinden eines Blocks kann mit der CSS-Übergangseigenschaft erreicht werden:

Element (Deckkraft: 0,1; Übergang: Deckkraft 1000 ms;) element:hover (Deckkraft: 0,8; Übergang: Deckkraft 2000 ms;)

Wenn Sie nun mit der Maus darüber fahren, ändert sich die Transparenz des Elementknotens innerhalb einer Sekunde von 10 auf 80 %, und wenn der Cursor ihn verlässt, wird er innerhalb von zwei Sekunden auf den ursprünglichen Wert zurückgesetzt.

Mit der CSS-Opazitätseigenschaft in Kombination mit dem Übergangsmechanismus können Sie wunderschöne Effekte erzeugen.

Die wichtigsten Feinheiten des Deckkraftmechanismus in CSS:

• seine Wirkung erstreckt sich nicht nur auf den Hintergrund des Blocks, sondern auch auf dessen Textinhalt, der möglichst frei gelassen wird;
• Untergeordnete Elemente dürfen nicht weniger transparent sein als ihre übergeordneten Elemente.

Wenn diese Effekte das Leben des Layout-Designers erschweren, sollten Sie anstelle der Deckkraft einen einfachen transparenten Hintergrund verwenden und dessen Wert im RGBA- oder HSLA-Format definieren.

/* 06.07.2006 */

Der Transparenzeffekt ist das Thema dieses Artikels. Wenn Sie daran interessiert sind, zu erfahren, wie Sie HTML-Seitenelemente mithilfe von CSS oder Javascript transparent machen und wie Sie unter Berücksichtigung dieser Anforderungen eine browserübergreifende Kompatibilität erreichen (die in verschiedenen Browsern gleich funktioniert). Firefox-Browser, Internet Explorer, Opera, Safari, Konqueror, dann sind Sie herzlich willkommen. Darüber hinaus bedenken fertige Lösung allmähliche Änderung der Transparenz von mit Javascript.

Mit Symbiose meine ich Vereinigung verschiedene Stile Für verschiedene Browser in Eins CSS-Regel um den gewünschten Effekt zu erzielen, d.h. um die Cross-Browser-Kompatibilität zu implementieren.

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 und niedriger */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 – Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

Tatsächlich werden die erste und die letzte Regel benötigt, für IE5.5+ und Browser, die CSS3-Deckkraft verstehen, und die beiden Regeln in der Mitte machen offensichtlich keinen Unterschied, aber sie stören auch nicht wirklich (entscheide selbst). ob Sie sie brauchen).

Versuchen wir nun, die Transparenz über ein Skript einzustellen und dabei die oben beschriebenen Funktionen verschiedener Browser zu berücksichtigen.

Funktion setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Wenn kein Element mit der angegebenen ID oder dem Browser vorhanden ist unterstützt keine der bekannten Funktionen zur Steuerung der Transparenz if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Wenn die Transparenz bereits festgelegt ist, ändern Sie sie über die Filtersammlung , andernfalls Transparenz durch style.filter hinzufügen var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += " progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Um ​​andere Filter nicht zu überschreiben, verwenden Sie "+=" ) else // Andere Browser elem.style = nOpacity; ) function getOpacityProperty() ( if (typeof document.body.style.opacity == „string“) // CSS3-kompatibel (Moz 1.7+, Safari 1.2+, Opera 9) return „opacity“; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 und früher, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ return „filter“; falsch zurückgeben; //keine Transparenz)

Die Funktion benötigt zwei Argumente: sElemId – Element-ID, nOpacity – reelle Zahl Von 0,0 bis 1,0 wird die Transparenz in der Deckkraft des CSS3-Stils eingestellt.

Ich denke, es lohnt sich, den IE-Teil des setElementOpacity-Funktionscodes zu erklären.

Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+"");

Man könnte sich fragen, warum man die Transparenz nicht festlegen sollte, indem man (=) der Eigenschaft elem.style.filter = "..."; ? Warum wird „+=" verwendet, um die Filtereigenschaft an das Ende der Zeichenfolge anzuhängen? Die Antwort ist einfach, um andere Filter nicht zu „überschreiben“. Aber wenn Sie einen Filter auf diese Weise ein zweites Mal hinzufügen, werden die zuvor eingestellten Werte dieses Filters nicht geändert, sondern einfach am Ende der Eigenschaftszeile hinzugefügt, was nicht korrekt ist. Wenn also ein Filter bereits installiert ist, müssen Sie ihn über die Sammlung von Filtern bearbeiten, die auf das Element angewendet werden: elem.filters (bedenken Sie jedoch, dass dies nicht möglich ist, wenn der Filter dem Element noch nicht zugewiesen wurde um es über diese Sammlung zu verwalten). Auf Sammlungselemente kann entweder über den Filternamen oder über den Index zugegriffen werden. Der Filter kann jedoch in zwei Stilen angegeben werden, dem IE4-Kurzstil oder dem IE5.5+-Stil, der im Code berücksichtigt wird.

Fertige Lösung. Wir verwenden die Bibliothek opacity.js

img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Regel zum Ändern der Transparenz erstellen: Regelnamen festlegen, Transparenz starten und beenden, als sowie optionale Parameterverzögerungen, die sich auf die Geschwindigkeit der Transparenzänderung auswirken fadeOpacity.addRule("oR1", .3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" />

Wie man die Bibliothek anschließt, lässt sich meiner Meinung nach aus dem obigen Beispiel ersehen. Nun lohnt es sich, die Definition der Regeln zu erklären. Bevor Sie die Methoden zum reibungslosen Ändern der Transparenz aufrufen, müssen Sie die Regeln definieren, nach denen der Prozess ausgeführt wird: Sie müssen die anfängliche und endgültige Transparenz bestimmen und bei Bedarf auch einen Verzögerungsparameter angeben, der die Geschwindigkeit des Prozesses beeinflusst der sich verändernden Transparenz.

Regeln werden mit der Methode fadeOpacity.addRule definiert

Syntax: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Argumente:

• sRuleName – Regelname, willkürlich festgelegt;
• nStartOpacity und nFinishOpacity – Start- und Endtransparenz, Zahlen im Bereich von 0,0 bis 1,0;
• nDelay – Verzögerung in Millisekunden (optionales Argument, Standard ist 30).

Wir rufen die Transparenz auf, die sich selbst über die Methoden fadeOpacity(sElemId, sRuleName) einblendet, wobei sElemId die ID des Elements und sRuleName der Name der Regel ist. Um die Transparenz wiederherzustellen der Ausgangszustand Es wird die Methode fadeOpacity.back(sElemId) verwendet.

Ich möchte außerdem anmerken, dass für eine einfache Änderung der Transparenz (jedoch nicht für eine allmähliche Änderung) der :hover-Pseudoselektor genau richtig ist, mit dem Sie Stile für ein Element definieren können, wenn Sie mit der Maus darüber fahren.

a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; )

Bitte beachten Sie, dass das Bild innerhalb von Element A platziert wird. Tatsache ist, dass Internet Explorer bis Version 6 den Pseudo-Selektor:hover nur in Bezug auf Links und nicht auf irgendwelche Elemente versteht, wie es in CSS sein sollte (die Situation). wurde in IE7 korrigiert) .

Mit der Veröffentlichung von Windows XP trat die Glättung von Bildschirmschriften mit der ClearType-Methode auf und damit auch die Nebenwirkungen im IE bei Verwendung dieser Anti-Aliasing-Methode. Wenn in unserem Fall Transparenz auf ein Element mit Text angewendet wird, wenn die ClearType-Anti-Aliasing-Methode aktiviert ist, wird der Text nicht mehr normal angezeigt (fetter Text wird beispielsweise verdoppelt, es können auch verschiedene Artefakte auftreten, z. B. in die Form von Bindestrichen, gezackter Text). Um die Situation zu korrigieren, müssen Sie den IE einstellen Hintergrundfarbe, CSS-Eigenschaft Hintergrundfarbe, das Element, auf das Transparenz angewendet wird. Glücklicherweise wurde der Fehler im IE7 behoben.

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).

Deshalb werden wir heute über Transparenz in HTML-Seiten sprechen. 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 mithilfe von 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. Im Fall einer Transparenz von 30 % sollten Sie beispielsweise „opacity:0.30; filter:alpha(opacity=30);“ schreiben. 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: