Beachten Sie, dass der Textinhalt des Blocks vollständig sichtbar ist (100 % schwarz), während der Hintergrund auf einen Alphakanal von 0,88 eingestellt ist, d. h. 88 %.

Damit ist die Veröffentlichung abgeschlossen. Abonnieren Sie meinen Blog und vergessen Sie nicht, Freunde einzuladen. Ich wünsche Ihnen viel Glück beim Erlernen von Websprachen! Tschüss!

/* 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 mithilfe von Javascript.

Mit Symbiose meine ich die Kombination verschiedener Stile verschiedene Browser in einem 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 festzulegen 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"] || 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“;

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, geht meiner Meinung nach aus dem obigen Beispiel klar hervor. 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 – Name der Regel, 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 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 für IE die Hintergrundfarbe (CSS-Eigenschaft „background-color“) auf das Element festlegen, auf das Transparenz angewendet wird. Glücklicherweise wurde der Fehler im IE7 behoben.

Um in CSS einen transparenten Effekt zu erzeugen, wird die Eigenschaft opacity verwendet.

IE8 und frühere Versionen unterstützen eine alternative Eigenschaft – filter:alpha(opacity=x) , wobei „ x “ ein Wert von 0 bis 100 sein kann. Je niedriger der Wert, desto transparenter wird das Element.

Alle anderen Browser unterstützen die standardmäßige CSS-Eigenschaft opacity, die als Wert eine Zahl von 0,0 bis 1,0 annehmen kann. Je niedriger der Wert, desto transparenter wird das Element:

Dokumentname .myClass ( float: left; margin-right: 5px; opacity: 0,4; filter: alpha(opacity=40); /*für IE8 und früher*/ ) Versuchen "

Mit der Pseudoklasse:hover können Sie Änderungen vornehmen Aussehen Elemente, wenn Sie mit der Maus darüber fahren. Wir verwenden diese Funktion, damit das Bild seine Transparenz verliert, wenn man mit der Maus darüber fährt:

Dokumenttitel img ( float: left; margin-right: 5px; opacity: 0,4; filter: alpha(opacity=40); /*für IE8 und früher*/ ) img:hover ( opacity: 1,0; filter: alpha(opacity= 100); Versuchen "

Es gibt zwei mögliche Wege Machen Sie das Element transparent: die oben beschriebene Opazitätseigenschaft und die Angabe der Hintergrundfarbe im RGBA-Format.

Möglicherweise kennen Sie bereits das RGB-Farbdarstellungsmodell. RGB (Rot, Grün, Blau – Rot, Grün, Blau) ist ein Farbsystem, das den Farbton durch Mischen von Rot, Grün und Blau bestimmt. Um beispielsweise die Textfarbe auf Gelb festzulegen, können Sie eine der folgenden Deklarationen verwenden:

Farbe: RGB(255.255,0); Farbe: RGB (100 %, 100 %, 0);

Mit RGB angegebene Farben unterscheiden sich von den zuvor verwendeten Hexadezimalwerten darin, dass sie die Verwendung eines Alpha-Transparenzkanals ermöglichen. Das bedeutet, dass durch den Hintergrund eines Elements mit Alpha-Transparenz hindurch sichtbar ist, was sich darunter befindet.

Das Deklarieren einer RGBA-Farbe ähnelt in der Syntax den Standard-RGB-Regeln. Allerdings müssen wir den Wert auch als RGBA (anstelle von RGB) deklarieren und nach dem Farbwert einen zusätzlichen dezimalen Transparenzwert zwischen 0,0 (vollständig transparent) und 1 (vollständig undurchsichtig) angeben.

Farbe: RGBA (255,255,0,0,5); Farbe: RGBA (100 %, 100 %, 0,0,5);

Der Unterschied zwischen der Opazitätseigenschaft und der RGBA-Eigenschaft besteht darin, dass die Opazitätseigenschaft Transparenz auf das gesamte Element anwendet, was bedeutet, dass der gesamte Inhalt des Elements transparent wird. Und mit RGBA können Sie die Transparenz für einzelne Teile eines Elements festlegen (z. B. nur für den Text oder den Hintergrund):

Körper (Hintergrundbild: url(img.jpg); ) .prim1 ( Breite: 400px; Rand: 30px 50px; Hintergrundfarbe: #ffffff; Rand: 1px durchgehend schwarz; Schriftstärke: fett; Deckkraft: 0,5; Filter : alpha(opacity=70); /*für IE8 und früher*/ text-align: center; .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black ; Schriftstärke: fett; Textausrichtung: Mitte) Versuchen Sie es »

Hinweis: RGBA-Werte werden in IE8 und höher nicht unterstützt frühere Versionen. Um eine Fallback-Farbe für ältere Browser zu deklarieren, die keine Alpha-Farbwerte unterstützen, sollten Sie diese zuerst vor dem RGBA-Wert angeben: Hintergrund: rgb(255,255,0); Hintergrund: rgba(255,255,0,0,5);