Manchmal wird es notwendig zu tun transparenter Hintergrund für einen bestimmten Block auf der Seite. Dieser Effekt kann erzielt werden, indem ein transparentes Hintergrundbild im Format erstellt wird * .png und setzen Sie es durch die Eigenschaft hintergrund: URL ("./ images / fon.png");.

Verwenden der Eigenschaft OPACITY

Warum so viel Komplexität, wenn es mit CSS möglich ist? Lassen Sie uns einen Hauptblock auf der Seite erstellen ( seite) und verschachtelter Block ( block), die wir Transparenz setzen werden. Die browserübergreifende Kompatibilität wird wie folgt erreicht: Eigenschaft für Internet Explorer - filter: Alpha (Deckkraft \u003d 50) (transparenzwert im Bereich von 0 bis 100), für Browser, die den CSS3-Standard unterstützen - opazität: 0,5 (eine Zahl im Bereich von 0,0 bis 1,0).

HTML Quelltext:

Ergebnis:

Transparenter Hintergrund für den Block

Wie Sie sehen, erstreckt sich die Transparenz auf alle Kinder.

Transparenter Hintergrund für den Block

im DIV mit Klasse block und sie können den Transparenzwert ihrer Eltern nicht überschreiten. Das heißt, alles in diesem Block wird transparent. Was ist, wenn Sie den transparenten Hintergrund nur für das div belassen möchten?

Verwenden der Eigenschaft BACKGROUND-COLOR

Wir müssen einige Änderungen am CSS-Stylesheet vornehmen, nämlich den Block ersetzen DIV mit Klasse block Eigentum opazität pro Eigenschaft hintergrundfarbe.

Div.block (Breite: 260px; Höhe: 140px; Rand oben: 79px; Rand links: 94px; Rand: 1px durchgehend # 333333; / * nur transparenter Hintergrund DIV.block * / Hintergrundfarbe: rgba (255, 255) , 255, 0,5); / * Hintergrundfarbe, Transparenz 0,5 * /)

Ergebnis:

Transparenter Hintergrund für den Block

Im obigen Beispiel für Farbe und Hintergrund verwendet rGBA-Format ... Wobei die ersten drei Buchstaben stehen rot, grün, blau (rot, grün, blau) symbolisiert letzteres alpha-Kanal (ein) und setzt transparenzb Element aus 0.0 Vor 1.0 .

Hintergrundfarbe: rgba (r, g, b, a);

Der Wert der Farbkomponente wird in Klammern anstelle von Buchstaben angegeben und kann beispielsweise in einem beliebigen grafischen Editor angezeigt werden Paint.Net (Bildschirmfoto). Der letzte Wert ein Legt die Transparenz fest und stimmt mit dem Eigenschaftswert überein opazität.

http://cp77.comxa.com/verstka/css-transparent-fon

CSS-Eigenschaft Opazität Legt die Deckkraft des Elements fest. Opazität ist der Grad, in dem Inhalte hinter einem Element verborgen sind, im Gegensatz zu Transparenz.

Die Quelle für dieses interaktive Beispiel wird in einem GitHub-Repository gespeichert. Wenn Sie einen Beitrag zum interaktiven Beispielprojekt leisten möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns eine Pull-Anfrage.

die Deckkraft gilt für das gesamte Element einschließlich seines Inhalts, auch wenn der Wert nicht von untergeordneten Elementen geerbt wird. Somit haben ein Element und seine Nachkommen die gleiche Deckkraft im Verhältnis zum Hintergrund des Elements, obwohl sie im Verhältnis zueinander unterschiedliche Deckkraft haben.

Wenn Sie die Deckkraft mit einem anderen Wert als 1 verwenden, wird das Element in einen neuen Überlagerungskontext eingefügt.

Beispiele von

Grundlegendes Beispiel

div (Hintergrundfarbe: gelb;) .light (Deckkraft: 0,2; / * kaum sichtbarer Text auf dem Hintergrund * /) .medium (Deckkraft: 0,5; / * Text ist auf dem Hintergrund besser sichtbar * /) .heavy (Deckkraft: 0,9 ; / * Der Text ist im Hintergrund sehr klar * /)

Unterschiedliche Deckkraft mit: Schwebeflug

img.opacity (Deckkraft: 1; Filter: Alpha (Deckkraft \u003d 100); / * IE8 und darunter * / zoom: 1; / * "hasLayout" wird in IE 7 und darunter ausgelöst * /) img.opacity: hover (Deckkraft: 0..png "alt \u003d" (! LANG: MDN-Logo" width="128" height="146" class="opacity"> !}

Zugänglichkeitsprobleme

Wenn die Deckkraft des Textes einstellbar ist, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes und dem Hintergrund, auf dem der Text platziert ist, hoch genug ist, damit Personen mit Sehbehinderung den Seiteninhalt lesen können.

Das Farbkontrastverhältnis wird durch Vergleichen der Helligkeit des Textes mit der eingestellten Deckkraft und dem Hintergrundfarbwert bestimmt. Um den aktuellen Richtlinien für die Barrierefreiheit von Webinhalten (WCAG) zu entsprechen, ist für Textinhalte ein Verhältnis von 4,5: 1 und für größere Texte wie Überschriften ein Verhältnis von 3: 1 erforderlich. Großer Text ist definiert als 18,66 Pixel oder größer oder 24 Pixel oder größer.

Spezifikationen

Ursprünglicher Wert	1.0
Es gilt für	alle Elemente
Vererbt	nein
Anzeige	visuell
Wertebehandlung	angegebener Wert, auf Bereich zugeschnitten
Animationstyp	werden als Gleitkommazahlen interpoliert. "\u003e Zahl
Kanonische Ordnung	eindeutige mehrdeutige Reihenfolge durch formale Grammatik definiert

Browser-Unterstützung

Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.

Aktualisieren Sie die Kompatibilitätsdaten auf GitHub

	Computers						Handy, Mobiltelefon
	Chrom	Kante	Feuerfuchs	Internet Explorer	Oper	Safari	Android-Webansicht	Chrome für Android	Firefox für Android	Opera für Android	Safari unter iOS	Samsung Internet
Opazität	Chrom Volle Unterstützung 1	Kante Volle Unterstützung 12	Feuerfuchs Volle Unterstützung 1 Volle Unterstützung 1 Keine Unterstützung 1 - 3.5 Mit Präfix Mit Präfix Benötigt Herstellerpräfix: -moz-	IE Volle Unterstützung 9	Oper Volle Unterstützung 9	Safari Volle Unterstützung 2 Volle Unterstützung 2 Keine Unterstützung 1.1 - 2 Mit Präfix Mit Präfix Benötigt Herstellerpräfix: -khtml-	WebView Android Volle Unterstützung 1	Chrome Android Volle Unterstützung 18	Firefox Android Volle Unterstützung 4	Opera Android Volle Unterstützung 10.1	Safari iOS Volle Unterstützung 1	Samsung Internet Android Volle Unterstützung Ja
Unterstützung für prozentuale Deckkraftwerte	Chrom Volle Unterstützung 78	Kante Keine Unterstützung Nr	Feuerfuchs Volle Unterstützung 70	IE Keine Unterstützung Nr	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nr	WebView Android Volle Unterstützung 78	Chrome Android Volle Unterstützung 78	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein

Legende

Volle Unterstützung Volle Unterstützung Keine Unterstützung Keine Unterstützung Erfordert ein Herstellerpräfix oder einen anderen Namen. Erfordert ein Herstellerpräfix oder einen anderen Namen.

CSS 3-Eigenschaft opazität Mit dieser Option können Sie das eine oder andere Element der Site transparent machen.

Die Transparenz eines Elements wird durch einen Wert von bestimmt 0 Vor 1 Wo 0 - völlig transparent a 1 - überhaupt undurchsichtig. Also zum Beispiel der Wert 0.5 Eigenschaften opazität Auf das Bild angewendet bedeutet dies, dass dieses Bild halbtransparent sein sollte.

Transparenz im IE

Der Internet Explorer-Browser unterstützt keine Eigenschaften opazität Bis zur neunten Version verfügt es jedoch über einen eigenen Filter, mit dem Sie den Transparenzgrad einstellen können:

filter: Alpha (Deckkraft \u003d 50)

Wert opazität für Internet Explorer kann der Browserfilter von abweichen 0 - völlig transparent für 100 - undurchsichtig

Blöcke dieses Menüs sind auch im IE beim Schweben halbtransparent !!

Zuhause
Seitenverzeichnis
Kaufen Sie einen Elefanten
Verkaufe einen Elefanten
Mieten Sie einen Elefanten

Präfixe.

Dies könnte im Prinzip das Kapitel über Transparenz beenden, aber ich möchte Ihnen mehr über das sogenannte erzählen herstellerpräfixe.. diese Kameraden haben nicht viel mit diesem Kapitel zu tun, aber im Laufe des Lernens von CSS3 werden sie immer häufiger auftreten und irgendwo müssen Sie darüber sprechen - also werde ich es Ihnen hier erzählen.

Herstellerpräfixe sind daher spezielle Präfixe für CSS-Eigenschaften, die von Browsern für experimentelle Eigenschaften verwendet werden, die nicht offiziell Teil der CSS-Spezifikation sind.

Wir erinnern uns, dass sich die CSS 3-Spezifikation noch in der Entwicklung befindet und die in diesem Lernprogramm beschriebenen Eigenschaften formal nicht vorhanden sind, aber Browser verwenden sie bereits aktiv auf eigene Gefahr und Gefahr.

Warum auf eigene Gefahr und Gefahr? Ja, da die Möglichkeit besteht, dass sich die darin beschriebenen Eigenschaften bei der offiziellen Genehmigung der CSS 3-Spezifikation in ihrer Wirkung von den gleichnamigen Eigenschaften unterscheiden, die bereits von Browsern verwendet werden. Nun, hier ist die Marke. Nehmen wir an, die Entwickler der CSS 3-Spezifikation bezeichnen eine Eigenschaft opazität Nicht als Transparenzgrad des Blocks, sondern zum Beispiel als Schattierung oder Flackern (natürlich schreibe ich Unsinn), der dann von Millionen installierter Browser angezeigt wird opazität ist es Transparenz !?

Oder nehmen wir an, die Browser-Entwickler haben sich eine eigene Eigenschaft ausgedacht - eine Innovation, die sonst niemand und nirgendwo hat, aber ein Dokument mit einer solchen Eigenschaft besteht die Validierungsprüfung nicht, da die Spezifikation keine solche Eigenschaft enthält.

Aus diesen und anderen Gründen verwenden Browser Präfixe am Anfang von Eigenschaften, die nicht Teil der offiziellen Spezifikation sind. Jeder Browser hat ein eigenes Präfix, das mit dem Zeichen "-" beginnt. Dieses Zeichen am Anfang der Eigenschaft sowie dieses Zeichen "_" gemäß der CSS 2.1-Spezifikation bedeuten, dass die Eigenschaft für CSS-Erweiterungen bestimmter Browser reserviert ist.

Hier sind die beliebtesten Browser und ihre Präfixe:

Browser	Präfix
Oper	-Ö-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 und höher	-Frau-
Safari bis Version 3, Konqueror	-khtml-
Safari 3 und höher, Google Chrome	-webkit-

Es ist sehr einfach, Präfixe zu verwenden. Es reicht aus, eine CSS-Eigenschaft zu übernehmen und das erforderliche Präfix beispielsweise durch eine Eigenschaft zu ersetzen opazität Ersatz -moz- es stellt sich heraus: -Moz-Opazität

Obwohl in der Tat mein Ausdruck “ verwenden Sie Präfixe"Ist falsch! Tatsächlich wird nirgendwo etwas ersetzt, nur eine Eigenschaft opazität , Gibt es -Moz-Opazität und dies sind zwei verschiedene Eigenschaften, die nicht die gleiche Funktion ausführen müssen !! - das sollte verstanden werden ..

Es sollte auch klar sein, dass bestimmte Browser bis zu bestimmten Versionen CSS-Eigenschaften nur mit ihren eigenen Präfixen unterstützen können (auch hier drücke ich meine eigenen Eigenschaften falsch aus - Browser-CSS-Erweiterungen), oder sie können sich zunächst auf sogar entwickelte Spezifikationen verlassen. - Wir werden jeden Fall in diesem Tutorial separat betrachten.

In diesem Kapitel zur Transparenz ist zu beachten, dass Firefox 3.5 und frühere Versionen ihre eigenen Eigenschaften verwenden -Moz-Opazität und der Safari-Browser vor Version 1.1 verwendet seine Eigenschaft -khtml-Deckkraft .

Um unser Beispiel vollständig browserübergreifend zu gestalten, müssen wir dem Code einige weitere Zeilen hinzufügen:

Wie Sie sehen können, dehnen Präfixe den Code erheblich aus, und ihre Verwendung ist nicht immer gerechtfertigt, wenn die Versionen von Browsern, die mit bestimmten Eigenschaften nur mit ihren Präfixen arbeiten möchten, alt genug sind, wie dies bei der Eigenschaft der Fall ist opazität , dann kann man sie nicht spezifizieren .. - obwohl das natürlich ein schlechter Rat ist ..

Nun zu einigen nützlichen Tipps.

Verwenden Sie immer Präfixe (es sei denn, ein bestimmter Browser kann natürlich nicht darauf verzichten), wenn die verwendete Eigenschaft die Leistung, Lesbarkeit und Benutzerfreundlichkeit der Website erheblich beeinträchtigen kann. Es ist eine Sache, wenn einige kleine Dinge im Design der Site nicht funktionieren, und es ist völlig anders, wenn beispielsweise das Site-Menü nicht funktioniert oder es unmöglich ist, den Text auf der Site zu lesen, da der Browser einige Eigenschaften nicht unterstützt und stattdessen eine eigene ähnliche verwendet.

/* 06.07.2006 */

CSS-Transparenz (CSS-Deckkraft, Javascript-Deckkraft)

Transparenz ist das Thema dieses Artikels. Wenn Sie lernen möchten, wie Sie HTML-Seitenelemente mithilfe von CSS oder Javascript transparent machen und wie Sie eine browserübergreifende Kompatibilität (dieselbe Arbeit in verschiedenen Browsern) unter Berücksichtigung der Browser Firefox, Internet Explorer, Opera, Safari und Konqueror erreichen, sind Sie herzlich willkommen. Schauen wir uns außerdem eine vorgefertigte Lösung an, um die Transparenz mithilfe von Javascript schrittweise zu ändern.

CSS-Deckkraft

CSS-Opazitätssymbiose

Mit Symbiose meine ich das Kombinieren verschiedener Stile für verschiedene Browser in einer CSS-Regel, um den gewünschten Effekt zu erzielen, d. H. für die browserübergreifende Implementierung.

Filter: progid: DXImageTransform.Microsoft.Alpha (Deckkraft \u003d 50); / * IE 5,5 + * / -moz-Opazität: 0,5; / * Mozilla 1.6 und darunter * / -khtml-Opazität: 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 für IE5.5 + und Browser benötigt, die die CSS3-Deckkraft verstehen, und die beiden Regeln in der Mitte wirken sich offensichtlich nicht auf das Wetter aus, aber sie stören nicht wirklich (entscheiden Sie selbst, ob Sie sie benötigen).

Javascript-Opazitätssymbiose

Versuchen wir nun, die Transparenz über ein Skript festzulegen, wobei die Eigenschaften der oben beschriebenen Browser berücksichtigt werden.

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

Die Funktion akzeptiert zwei Argumente: sElemId - die ID des Elements, nOpacity - ein Gleitkommawert von 0,0 bis 1,0, der die CSS3-Deckkraft angibt.

Ich denke, es lohnt sich, den IE-bezogenen Teil der Funktion setElementOpacity zu klären.

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

Es kann sich die Frage stellen, warum nicht Transparenz festgelegt wird, indem der Eigenschaft elem.style.filter \u003d "..." (\u003d) zugewiesen wird. ? Warum "+ \u003d" verwenden, um am Ende einer Zeile eine Filtereigenschaft hinzuzufügen? Die Antwort ist einfach, um andere Filter nicht zu "überschreiben". Wenn Sie jedoch ein Filter auf diese Weise ein zweites Mal hinzufügen, werden die zuvor festgelegten Werte dieses Filters nicht geändert, sondern einfach am Ende der Eigenschaftszeile hinzugefügt, was nicht korrekt ist. Wenn der Filter bereits installiert ist, müssen Sie ihn daher über die Sammlung von Filtern bearbeiten, die auf das Element angewendet werden: elem.filters (beachten Sie jedoch, dass es unmöglich ist, ihn über diese Sammlung zu verwalten, wenn der Filter dem Element noch nicht zugewiesen wurde). Auf die Elemente der Sammlung 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.

Reibungsloser Wechsel der Elementtransparenz

Fertige Lösung. Verwenden der Bibliothek opacity.js

fadeOpacity (this.id, "oR1")"onmouseout \u003d" fadeOpacity.back (this.id)"src \u003d" / img / Erdbeer.jpg "width \u003d" 100 "height \u003d" 80 "/\u003e fadeOpacity (this.id, "oR1")"onmouseout \u003d" fadeOpacity.back (this.id)"src \u003d" / img /omato.jpg "width \u003d" 82 "height \u003d" 100 "/\u003e fadeOpacity (this.id, "oR1")"onmouseout \u003d" fadeOpacity.back (this.id)"src \u003d" / img / sweet_cherry.jpg "width \u003d" 98 "height \u003d" 97 "/\u003e

Grundlagen:

1. Wir verbinden die Funktionsbibliothek;
2. Wir definieren Regeln mit der Methode fadeOpacity.addRule ();
3. Aufruf der Methode fadeOpacity () um die Transparenz vom Startwert zum Endwert zu ändern, oder fadeOpacity.back () um zum Anfangswert der Transparenzstufe zurückzukehren.

Kauen

Wie man die Bibliothek verbindet, geht aus dem obigen Beispiel 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 definieren und gegebenenfalls den Verzögerungsparameter angeben, der die Geschwindigkeit des Transparenzänderungsprozesses beeinflusst.

Regeln werden mit der Methode definiert fadeOpacity.addRule

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

Argumente:

• sRuleName - der Name der Regel, willkürlich festgelegt;
• nStartOpacity und nFinishOpacity - Start- und Endtransparenz, Zahlen im Bereich von 0,0 bis 1,0;
• n Verzögerung - Verzögerung in Millisekunden (optional, standardmäßig 30).

Der Aufruf des Transparenz-Fading erfolgt über die Methoden fadeOpacity (sElemId, sRuleName), wobei sElemId die Element-ID und sRuleName der Regelname ist. Die Methode fadeOpacity.back (sElemId) wird verwendet, um die Transparenz auf ihren ursprünglichen Zustand zurückzusetzen.

: Bewegen Sie den Mauszeiger, um die Transparenz einfach zu ändern

Ich stelle auch fest, dass für eine einfache Änderung der Transparenz (aber keine allmähliche Änderung) der Pseudo-Selektor genau richtig ist : schwebenHiermit können Sie Stile für ein Element definieren, wenn Sie den Mauszeiger darüber halten.

Beachten Sie, dass sich das Bild innerhalb des A-Elements befindet. Der Punkt ist, dass Internet Explorer bis Version 6 Folgendes versteht: Hover-Pseudo-Selektor, nur wird auf Links angewendet und nicht auf Elemente, wie es in CSS sein sollte (in IE7 ist die Situation behoben).

Transparenz und gezackter Text im IE

Mit der Veröffentlichung von Windows XP wurde die Glättung der Bildschirmschrift mithilfe dieser Methode angezeigt ClearTypeund damit die Nebenwirkungen im IE bei Verwendung dieser Anti-Aliasing-Methode. Wenn in unserem Fall Transparenz auf ein Element mit Text angewendet wird, während die Anti-Aliasing-Methode ClearType aktiviert ist, wird der Text nicht mehr normal angezeigt (fetter Text - Fett gedrucktZum Beispiel Doppel, verschiedene Artefakte können auch erscheinen, zum Beispiel in Form von Linien (gezackter Text). Um die Situation zu beheben, müssen Sie für IE die Hintergrundfarbe, die CSS-Eigenschaft, festlegen hintergrundfarbedas Element, auf das Transparenz angewendet wird. Glücklicherweise hat IE7 den Fehler behoben.

Guten Tag, Webentwicklungsfreaks sowie ihre Neulinge. Für diejenigen, die nicht den Trends im IT-Bereich oder vielmehr der Web-Mode folgen, möchte ich feierlich mitteilen, dass diese Veröffentlichung zum Thema "Wie man mit CSS-Tools einen transparenten Block erstellt" genau der richtige Weg für Sie ist. In der Tat wird die Einführung verschiedener transparenter Objekte in Online-Dienste im laufenden Jahr 2016 als stilvoller Schritt angesehen.

Daher werde ich Ihnen in diesem Artikel alle vorhandenen Methoden zur Schaffung von Transparenz erläutern, ausgehend von antidiluvianischen Lösungen, mich auf die Kompatibilität von Lösungen mit Browsern konzentrieren und auch spezifische Beispiele für Programmcode geben. Jetzt mach dich an die Arbeit!

Methode 1. Antidiluvian

Als es noch schwache Computer gab und "Fähigkeiten" nicht entwickelt wurden, entwickelten die Entwickler ihre eigene Methode, um einen transparenten Hintergrund zu erstellen: transparente Pixel wiederum mit farbigen. Auf diese Weise sah der erstellte Block beim Skalieren wie ein Schachbrett aus, aber in seiner normalen Größe sah er wie eine Art Transparenz aus.

Dies hilft meiner Meinung nach natürlich "Krücke" in alten Versionen von Browsern, in denen moderne Lösungen nicht funktionieren. Es ist jedoch zu beachten, dass die Qualität der Anzeige des Textes , in solche eingeschrieben, fällt stark ab.

Methode 2. Nicht verwirrt

In seltenen Fällen lösen Entwickler das Problem mit der Einführung eines durchscheinenden Bildes, indem sie ... ein fertiges halbtransparentes Bild einfügen! Hierzu werden im PNG-24-Format gespeicherte Bilder verwendet. Mit diesem Grafikformat können Sie 256 Transluzenzstufen einstellen.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Diese Methode ist jedoch aus mehreren Gründen nicht zweckmäßig:

1. Internet Explorer 6 funktioniert mit dieser Technologie nicht. Sie müssen dafür Skriptcode schreiben.
2. Es ist unmöglich, die Hintergrundfarben in CSS zu ändern.
3. Wenn die Funktion zum Anzeigen von Bildern im Browser deaktiviert ist, wird sie ausgeblendet.

Methode 3. Proprietär

Die häufigste und bekannteste Methode, einen Block transparent zu machen, ist die Eigenschaft opazität.

Der Parameterwert variiert in dem Bereich, in dem das Objekt bei 0 unsichtbar ist und bei 1 vollständig angezeigt wird. Es gibt jedoch auch hier einige unangenehme Momente.

Erstens erben alle Kinder Transparenz. Dies bedeutet, dass der eingeschriebene Text zusammen mit dem Hintergrund auch "durchscheint".

Zweitens "dreht Internet Explorer wieder die Nase hoch" und bis Version 8 funktioniert nicht mit opazität.

Verwenden Sie, um dieses Problem zu lösen filter:alpha (Deckkraft \u003d Wert).

Schauen wir uns ein Beispiel an.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Methode 4. Modern

Heute verwenden Profis das Tool rgba (r, g, b, a).

Vorher habe ich gesagt, dass RGB eines der beliebtesten Farbmodelle ist, bei denen R für alle Rottöne, G-Grüntöne und B-Blautöne verantwortlich ist.

Im Fall des CSS-Parameters ist die Variable A für den Alphakanal verantwortlich, der wiederum für die Transparenz verantwortlich ist.

Der Hauptvorteil der letzteren Methode besteht darin, dass der Alphakanal keine Objekte innerhalb des gestalteten Blocks beeinflusst.

rgba (r, g, b, a) wird unterstützt seit:

• 10 Versionen von Opera;
• Internet Explorer 9;
• Safari 3.2;
• 3 Versionen von Firefox.

Ich möchte auf eine interessante Tatsache hinweisen! Der geliebte Internet Explorer 7 gibt beim Kombinieren einer Eigenschaft einen Fehler aus hintergrundfarbe mit dem Namen der Farben (Hintergrundfarbe: Gold). Daher lohnt es sich nur zu verwenden:

hintergrundfarbe: rgba (255, 215, 0, 0,15)

Nun zu einem Beispiel.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

In unserem Shop finden Sie alle Arten von Blumen.

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, Ihre Freunde einzuladen. Viel Glück beim Erlernen von Web-Sprachen! Tschüss!