Erläuterung des Hintergrunds:transparent in CSS

Dieser Artikel stellt hauptsächlich die Erklärung zum Hintergrund vor: Transparent in CSS. Jetzt kann ich ihn mit Ihnen teilen.

Was genau ist transparent in CSS? Bedeutet das? Ich habe es immer für seltsam gehalten. Dieser Artikel wird es im Detail erklären.

Manchmal sehe ich das Einige CSS-Attribute sind als „background:transparent“ definiert. Das bedeutet, dass der Hintergrund transparent ist. Tatsächlich ist die Standardfarbe des Hintergrunds das transparente Attribut. Es ist also das Gleiche, ob Sie schreiben oder nicht.
Ich habe seit einiger Zeit keinen Computer mehr bei mir Beim Schreiben einer Webversion des Betriebssystems bin ich sicher auf viele Probleme gestoßen, die jedoch sehr problematisch waren Ich arbeite hart daran, sie zu lösen. Lassen Sie mich nun über ein Problem sprechen, auf das ich kürzlich gestoßen bin Im Stil dieses p ist transparent. Haha, wenn ich eine Maske aus p mache, dann schau dir bitte den folgenden Code an:

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

Das sind viele Masken-P-Einstellungen, was bedeutet, dass Benutzer

Wir betrachten hauptsächlich die letzten beiden Codezeilen. Wie bereits erwähnt, ist das Attribut „Hintergrundfarbe“ transparent, also warum müssen wir zu gehen die Mühe, ein Schwarz festzulegen (es spielt keine Rolle, legen Sie einfach eine Farbe fest, solange diese nicht transparent ist und keine leere Zeichenfolge sein darf. Der Browser verwendet standardmäßig eine leere Zeichenfolge (sie wird als transparent angezeigt) und legt fest
Ich habe das Experiment zunächst selbst durchgeführt, aber nachdem ich mich beruhigt und darüber nachgedacht hatte, entdeckte ich den Unterschied In den letzten beiden Sätzen des Codes können wir die maskierten Elemente bearbeiten, was bedeutet, dass sie keinen Abschirmungseffekt haben. Diese Operation ist jedoch begrenzt. Insbesondere können wir nur die fokussierten Elemente bearbeiten, z. B. Text und Bilder , Schaltflächen usw., lassen Sie mich Ihnen ein Beispiel geben:

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

Unter normalen Umständen wird eine Warnung angezeigt, solange Sie irgendwo auf dieses p klicken, aber wenn es von einem Element mit einer Hintergrundfarbe verdeckt wird von transparent Wenn wir auf 123 klicken, wird die Warnung angezeigt, da der Text den Fokus gewinnen kann, und das Gleiche gilt auch für andere Elemente. Übrigens wird das Ereignis dieses Elements mit der Hintergrundfarbe transparent von dem Element abgefangen, das von abgedeckt wird Wenn das von uns ausgelöste Objekt keinen Fokus hat, wird das Ereignis zur Verarbeitung an das transparente Element weitergeleitet und entsprechend diesem Element gesprudelt. Andernfalls wird das Ereignis mit Fokus vom Objekt mit Fokus ohne Austausch verarbeitet Das Ereignis wird je nach Element mit Fokus sprudeln. (Es scheint nicht leicht zu verstehen. Sie können es verstehen, indem Sie weitere Experimente durchführen.)

Sagen wir es so, jeder versteht es. Aus diesem Grund sind die letzten beiden Sätze erforderlich. Nur auf diese Weise können wir den Stil auf „Vollständig abgeschirmte Farbe“ setzen 🎜>, dann muss der folgende Text möglicherweise den Hintergrund löschen und

background:inherit;

mit einem transparenten Hintergrund schreiben. Entfernen Sie einfach das
. Wenn ein Element ein anderes Element verdeckt und Sie das folgende Element anzeigen möchten, dann tun Sie es Der Hintergrund des obigen Elements muss auf transparent gesetzt werden. Mit diesem Artikel stimmt etwas nicht. Der Inhalt dieses Artikels wurde unter IE7.0 getestet Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Vier Zustände im CSS-Stil eines Tags

CSS Einführung in die Verwendung des Solid-Attributs von Border

Das obige ist der detaillierte Inhalt vonErläuterung des Hintergrunds:transparent in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!