Die Bedeutung und Funktion von Hintergrund: transparent in CSS

Transparent bedeutet transparent. Tatsächlich ist die Standardfarbe des Hintergrunds das transparente Attribut:
Wenn ein Element ein anderes Element abdeckt und Sie das folgende Element anzeigen möchten, müssen Sie dies tun Stellen Sie den Hintergrund des obigen Elements auf transparent ein

Wenn ich mir CSS ansehe, sehe ich manchmal einige CSS-Attribute, die als Hintergrund definiert sind: transparent. Das bedeutet, dass der Hintergrund transparent ist. Tatsächlich ist die Standardfarbe des Hintergrunds das transparente Attribut. Es ist also das Gleiche, ob ich seit einiger Zeit keinen Artikel mehr schreibe. Obwohl ich einen Computer dabei habe, kann ich derzeit nicht auf das Internet zugreifen Ich werde es auf jeden Fall veröffentlichen, wenn ich damit fertig bin. Während des Schreibvorgangs sind viele davon im Detail und sehr mühsam aufgetreten Auch für mich selbst eine Art Verbesserung. Lassen Sie mich nun über ein Problem sprechen, auf das ich kürzlich gestoßen bin. Standardmäßig ist das Attribut „backgroungcolor“ im Stil dieses Divs transparent Ich erstelle eine Maske für ein Div, dann sehen Sie sich bitte den folgenden Code an: Kopieren Sie den Code wie folgt:

div.style.position="absolute"; 
div.style.width=document.body.clientWidth+"px"; 
div.style.height=document.body.clientHeight+"px"; 
div.style.left="0px"; 
div.style.top="0px"; 
div.style.zIndex="2000"; 
div.style.backgroundColor="black"; 
div.style.filter="alpha(opacity="+0+");";

Dies ist die Einstellung vieler maskierter Divs, was bedeutet, dass Benutzer vor der Bedienung anderer Elemente geschützt sind Wir schauen uns hauptsächlich die letzten beiden Codezeilen an. Wie bereits erwähnt, ist das Standard-Hintergrundfarbenattribut von div transparent. Warum machen wir uns also die Mühe, ein Schwarz festzulegen? Egal, legen Sie einfach eine Farbe fest, solange sie nicht transparent ist und es sich nicht um eine leere Zeichenfolge handeln darf. Der Browser behandelt die leere Zeichenfolge standardmäßig als transparent.) Und stellen Sie den Filter so ein, dass er transparent ist. Ich habe den Test selbst durchgeführt Die Testergebnisse verwirrten mich zunächst, aber nachdem ich mich beruhigt und darüber nachgedacht hatte, entdeckte ich den Unterschied. Wenn wir die letzten beiden Sätze des obigen Codes nicht haben, können wir mit maskierten Elementen arbeiten. Dies bedeutet, dass es keine abschirmende Wirkung hat, dieser Vorgang jedoch begrenzt ist. Konkret können wir nur auf fokussierte Elemente wie Text, Bilder, Schaltflächen usw. zugreifen. Lassen Sie mich Ihnen ein Beispiel geben: Kopieren Sie den Code wie folgt :

<div style="border:1px red solid;width:100px;height:100px" onclick="alert(1)"123</div >

Unter normalen Umständen wird eine Warnung angezeigt, solange Sie irgendwo auf dieses Div klicken. Wenn es jedoch durch ein Element mit der Hintergrundfarbe transparent verdeckt wird, erhalten wir nur die Warnung, wenn wir auf 123 klicken, da der Text den Fokus erhalten kann, und das Gleiche gilt für andere Elemente. Übrigens wird das Ereignis dieses Elements mit der Hintergrundfarbe transparent von dem davon abgedeckten Element abgefangen Das ausgelöste Objekt hat keinen Fokus, dann wird das Ereignis zur Verarbeitung an das transparente Element ausgetauscht und entsprechend diesem Element gesprudelt. Andernfalls wird das Ereignis mit Fokus vom Objekt mit Fokus verarbeitet und nicht ausgetauscht Blasen entsprechend dem Element mit Fokus (Es scheint nicht leicht zu verstehen, Sie können es verstehen, indem Sie weitere Experimente durchführen.) Wenn der Stil auf eine transparente Farbe eingestellt wird, lautet der oben geschriebene Kopiercode manchmal wie folgt: Hintergrund: inherit; Dann müssen Sie möglicherweise den Hintergrund löschen. Ich habe den Kopiercode wie folgt geschrieben: Hintergrund: transparent; transparenter Hintergrund, dh Entfernen des Hintergrunds, wenn Sie das folgende Element anzeigen möchten , dann müssen Sie den Hintergrund des obigen Elements festlegen, um ein neues Div für transparent zu erstellen

Standardmäßig ist das Attribut backgroungcolor im Stil dieses Divs transparent Ich erstelle eine Maske für das Div, dann sehen Sie sich bitte den folgenden Code an:

Dies ist die Einstellung vieler maskierter Divs, was bedeutet, dass Benutzer vor der Bedienung anderer Elemente auf der Webseite geschützt sind.
Wir schauen hauptsächlich In den letzten beiden Codezeilen ist das Standardattribut „backgroundcolor“ von „div“ transparent, das heißt, es ist transparent. Warum machen wir uns also die Mühe, ein Schwarz festzulegen (es spielt keine Rolle, legen Sie einfach eine Farbe fest). Da es nicht transparent ist und es sich nicht um eine leere Zeichenfolge handeln kann, behandelt der Browser die leere Zeichenfolge standardmäßig als transparent und stellt den Filter so ein, dass er transparent ist.
Ich habe das Experiment selbst durchgeführt Testergebnisse zunächst, aber nachdem ich mich beruhigt hatte und darüber nachgedacht hatte, entdeckte ich den Unterschied. Wenn wir die letzten beiden Teile des obigen Codesatzes nicht hätten, könnten wir die maskierten Elemente bearbeiten, was bedeutet, dass es so ist wird keine abschirmende Wirkung haben, aber dieser Vorgang ist begrenzt. Konkret können wir nur auf fokussierte Elemente wie Bilder, Schaltflächen usw. eingehen. Lassen Sie mich Ihnen ein Beispiel geben:
Unter normalen Umständen, solange Wenn Sie irgendwo auf dieses Div klicken, wird eine Warnung angezeigt. Wenn es jedoch von einem Element mit der Hintergrundfarbe „Transparent“ abgedeckt wird, können wir nur auf 123 klicken. Es wird eine Warnung angezeigt, da der Text den Fokus erhalten kann, und das Gleiche gilt für andere Übrigens wird das Ereignis dieses Elements mit einer transparenten Hintergrundfarbe von dem von ihm abgedeckten Element abgefangen. Wenn das von uns ausgelöste Objekt keinen Fokus hat, wird das Ereignis zur Verarbeitung und Sprudelung an das transparente Element weitergeleitet Andernfalls wird das Ereignis mit dem Fokus vom Objekt mit dem Fokus verarbeitet und nicht entsprechend dem Element mit dem Fokus ausgetauscht (Es scheint nicht sehr einfach zu sein, das können Sie Verstehen Sie es, wenn Sie es selbst ausprobieren)

Das obige ist der detaillierte Inhalt vonDie Bedeutung und Funktion von Hintergrund: transparent in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!