CSS setzt den Elementhintergrund auf transparent-CSS-Tutorial-php.cn

CSS setzt den Elementhintergrund auf transparent

高洛峰

Freigeben： 2016-11-24 10:20:12

Original

1687 Leute haben es durchsucht

Um den Hintergrund eines bestimmten Elements transparent zu machen, funktioniert es unter Chrome, Firefox und Opera folgendermaßen:
[css]
background-color: rgba(0, 0, 0, 0.4 );
Der letzte Parameter 0,4 in RGBA ist die gewünschte Transparenz im Bereich von 0 bis 1.

Im IE sieht es normalerweise so aus:
[css]
background-color: rgb(0, 0, 0);
filter: alpha(opacity=40); >Opazität steht für Transparenz, ihr Wertebereich liegt zwischen 0 und 100

Wie kann man es also mit verschiedenen Browsern kompatibel machen? Schreiben Sie sie einfach zusammen.

Da ie RGBA nicht unterstützt, wird es ignoriert. Andere Browser ignorieren im Allgemeinen diejenigen, die sie nicht unterstützen.
Hier ist ein Beispiel:
HTML-Code:

[html] 
<body> 
    <div class="non-transparent"> 
        aaaaa 
        </div> 
    </body> 
     
<div class="transparent"> 
    <div class="box"> 
        box 
        </div> 
    </div>

Nach dem Login kopieren

CSS-Code:

[css] 
.non-transparent:hover { 
    background-color: yellow; 
} 
 
.transparent { 
    position: absolute; 
    top: 0; 
    left: 0; 
     
    text-align: center; 
     
    width: 100%; 
    height: 100%; 
     
    filter: alpha(opacity=40); 
    background-color: rgb(0, 0, 0); 
     
    background-color: rgba(0, 0, 0, 0.4); 
} 
 
.box { 
    background-color: yellow; 
    width: 50%; 
    height: 50%; 
     
    position: relative; 
    left: 5%; 
    top: 10%; 
}

Nach dem Login kopieren

Anzeigeeffekt:

CSS setzt den Elementhintergrund auf transparent

Chrome:

Firefox:

CSS setzt den Elementhintergrund auf transparent

Oper:

CSS setzt den Elementhintergrund auf transparent

ie8:

CSS setzt den Elementhintergrund auf transparent

Darüber hinaus kann dies auch in Chrome, Firefox und Opera erfolgen:

Deckkraft: 0,4;
Aber in diesem Fall , es wird auch die Transparenz aller untergeordneten Elemente auf den gleichen Wert eingestellt, und der Effekt ist wie folgt:

CSS setzt den Elementhintergrund auf transparent