Eine kurze Diskussion über zwei Methoden zum Erreichen einer halbtransparenten Hintergrundfarbe in CSS

Um den Benutzern beim Layouten der Seite einen anderen visuellen Effekt zu bieten, müssen Sie die Hintergrundfarbe des Div auf einen halbtransparenten Zustand einstellen. Wissen Sie, wie das geht?

Als Nächstes sprechen wir darüber, wie Sie die Hintergrundfarbe eines Div auf zwei Arten halbtransparent machen können, sowie über die Vor- und Nachteile der beiden Methoden. Interessierte Freunde können gerne vorbeikommen und einen Blick darauf werfen. Ich hoffe, es ist hilfreich für Sie.

Zuerst verwenden wir die bekannte CSS-Eigenschaft „Opazität“, um die Hintergrundfarbe des Div zu ändern.

beschreiben:

Die Hintergrundfarbe des großen Divs außen ist gelb und die Hintergrundfarbe des kleinen Divs innen ist rot. Jetzt müssen wir die Hintergrundfarbe des großen Divs halbtransparent einstellen. Wir setzen den Wert des Opazitätsattributs auf 0,5. Der Code lautet wie folgt:

HTML-Teil:

 <div Klasse="aa">
     <divclass="bb"Ich bin der Inhalt</div>
 </div>

CSS-Teil:

 .aa{
 
     Breite: 250px;
     Höhe: 250px; 
     Hintergrund: gelb;             
     Deckkraft: 0,5;
     }
 
 .bb{ 
     Breite: 150px; 
     Höhe: 150px; 
     Hintergrund: rot;
     }

Effektbild:

Wie in der Abbildung gezeigt, wird die Hintergrundfarbe durchscheinend, aber der Hintergrund und der Text des kleinen Divs im Inneren werden durchscheinend. Dies ist möglicherweise nicht der gewünschte Effekt, daher verwenden wir diese Methode im Allgemeinen nicht. Wenn Sie möchten, dass beim Seitenlayout alles im Div transparent ist, verwenden Sie natürlich Opazität.
Als nächstes verwenden wir eine andere Methode, background-color:rgba(0,0,0,0~1). Mit dieser Methode wird nur der Div-Hintergrund transparent gemacht, ohne den Inhalt im Div zu beeinflussen.
Der HTM-Teil ist derselbe, ändern Sie einfach die Deckkraft in RGBA.

Der Code lautet wie folgt:

 .aa{
 
     Breite: 250px;
     Höhe: 250px; 
     Hintergrundfarbe: rgba(255,255,0,0,5);
     }
 
 .bb{ 
     Breite: 150px;
     Höhe: 150px;
     Hintergrund: rot; 
     }

Effektbild:

Aus dem Bild geht klar hervor, dass die Änderung der Transparenz des großen Divs keine Auswirkungen auf den Hintergrund und den Text darin hat. Daher verwenden wir normalerweise background-color:rgba(0,0,0,0~1), um die Hintergrundfarbe transparent einzustellen.

Oben werden zwei Möglichkeiten vorgestellt, die Transparenz der Div-Hintergrundfarbe zu ändern. Jede dieser Methoden hat ihre eigenen Vor- und Nachteile. Die jeweils zu verwendende Methode sollte sich nach den Anforderungen richten. Anfänger können mehr üben, um ihr Verständnis zu vertiefen. Ich hoffe, es wird Ihnen hilfreich sein.