Beispiel für die Erstellung eines halbtransparenten Hintergrundbilds und undurchsichtigen Inhalts in CSS3

Dieses Problem ist mir beim Erstellen der Anmeldeseite für meinen vorherigen Blog begegnet. Plötzlich wollte ich den Effekt eines transparenten Hintergrundbilds und undurchsichtigen Inhalts nutzen. Hier erzähle ich von meinen beiden Ideen.

Effektanzeige:

Der Inhalt ist halbtransparent

Undurchsichtiger Inhalt

Der gängigste Ansatz besteht darin, die Deckkraft des Elements festzulegen. Diese Einstellung führt dazu, dass sowohl der Inhalt als auch der Hintergrund halbtransparent sind, was den visuellen Effekt erheblich beeinträchtigt und den oben genannten Effekt nicht erzielt.

Methode 1: Legen Sie background-color:rgba() fest. Mit dieser Methode können Sie nur die Transparenz der Hintergrundfarbe festlegen.

Wenn der Hintergrund ein Bild ist, ist die obige Methode nicht anwendbar. Hier sind zwei Methoden:

Die erste Möglichkeit besteht darin, das Pseudoelement :: before zu verwenden. Dies tun wir, indem wir dem Pseudoelement einen Hintergrund hinzufügen und die Hintergrundtransparenz des Pseudoelements festlegen.

.login_box::vorher{
            Inhalt:"";
           
            Hintergrundbild:URL(images/one.jpg);
            Opazität: 0,5; //Transparenzeinstellung z-index: -1;
            Hintergrundgröße: 500px 300px;
            Breite: 500px; 
            Höhe: 300px;
            Position: absolut;
            //Stellen Sie sicher, dass Sie position:absolute festlegen, damit Sie den Z-Index so festlegen können, dass sich der Hintergrund in der nächsten Ebene des Inhalts befindet top:0px;
            links: 0px;
            Rahmenradius: 40px;
        }
         .login_box{
            Position: fest;
            links: 50 %;
            oben: 200px;
            Breite: 500px;
            Höhe: 300px;
            Rand links: -250px;
            Rahmenradius: 40px;
            Kastenschatten: 10px 10px 5px #888;
            Rand: 1px durchgezogen #666;
 
            Textausrichtung: zentriert;
        }

Die Methode ähnelt Pseudoelementen. Wir können verschiedene Divs festlegen, den Inhalt in den Divs platzieren, den Hintergrund des übergeordneten Divs festlegen und dann die Transparenz einstellen. Das Layout ist wie folgt:

<div Klasse="bg">
    <div Klasse="Inhalt">
    Inhalt
</div>

Dadurch kann der gleiche Effekt erzielt werden

Dies ist das Ende dieses Artikels über das Beispiel, wie man in CSS3 halbtransparente Hintergrundbilder mit undurchsichtigem Inhalt erzielt. Weitere verwandte CSS3-Hintergrundbilder mit halbtransparentem und undurchsichtigem Inhalt finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder stöbern Sie weiter unten in den verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!