Beispiel dafür, wie CSS den Hintergrund transparent und den Text undurchsichtig macht

Wenn wir einige Webseiten entwerfen und erstellen, können wir zunächst über die Verwendung von PNG-Bildverarbeitung nachdenken. Das einzige Kompatibilitätsproblem ist unter ie6. aber Das ist nicht schwierig, fügen Sie einfach einen Teil der JS-Verarbeitung hinzu. Wenn wir jedoch eine halbtransparente Masken-Popup-Ebene benötigen, z. B. ein Anmeldefeld, ein Registrierungsfeld, eine Eingabeaufforderung usw., muss möglicherweise die gesamte Seite mit einer halbtransparenten Maskenebene abgedeckt werden , dann ist dies möglicherweise keine gute Idee. Größere Bilder wirken sich auch auf die Anzahl der Rendering-Berechnungen auf der Seite aus.

Angenommen, es gibt ein solches Beispiel: „Es gibt einen DIV-Block, dieser DIV ist schwarz und durchscheinend, aber der Inhalt in diesem DIV muss intakt bleiben und darf nicht transparent sein“, was sollen wir dann tun?

Wenn wir den HTML-Teil so schreiben

<div class="touMingDiv">  
    <div>  
        <h1>这是透明的层这是透明的层这是透明的层这是透明的层  
            这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层  
        </h1>  
    </div>  
    <p>  
        这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome  
    </p>  
    <img src="bg.jpg"/>  
</div>

Für CSS könnten wir es so schreiben

.touMingDiv{  
    filter:Alpha(opacity=60);  
    opacity:0.6;  
}

Aber nach dem Testen haben wir festgestellt, dass nicht nur der div Container ist durchscheinend. Ja, sogar der Text und die Bilder im Div werden transparent gemacht. Dieser Effekt tritt auf, weil die Eigenschaften dieser Filter an untergeordnete Elemente vererbt wurden.

Wir können die folgende Methode verwenden, um dies zu erreichen

.touMingDiv{  
    width:800px;  
    min-height:300px;  
    color:#fff;  
    background:rgba(0,0,0,0.6);  
    background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
    filter:Alpha(opacity=60);/*只对ie7,ie8有效*/  
}  
.touMingDiv p,  
.touMingDiv div,  
.touMingDiv img{  
    position:relative;  
    /*或者是absolute，都可以使文字不透明，这样做还是为了  
    兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/  
}

Beachten Sie, dass der obige Hintergrund:rgba(0,0,0,0.6) nur mit ie9, ie10, FF funktioniert, Chrome ... usw. sind gültig, mit Ausnahme von ie6, ie7 und ie8, daher haben wir diese Codezeilen:

background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
filter:Alpha(opacity=60);/*只对ie7,ie8有效*/

Zusätzlich müssen wir die relativen oder absoluten Attribute für die untergeordneten Elemente festlegen damit der Hintergrund transparent erscheint. Der Text und die Bilder auf dem Hintergrund werden normal angezeigt.

Aber der Code hier ist definitiv nicht für ie6 geeignet. Es wird empfohlen, PNG-Bilder für ie6 zu verwenden und sie dann mit js zu verarbeiten.

Das obige ist der detaillierte Inhalt vonBeispiel dafür, wie CSS den Hintergrund transparent und den Text undurchsichtig macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!