Heim > Artikel > Web-Frontend > Wie stelle ich Transparenz in CSS ein, ohne die untergeordneten Elemente zu beeinflussen? Kompatibel mit allen Browser-Schreibmethoden

Wie stelle ich Transparenz in CSS ein, ohne die untergeordneten Elemente zu beeinflussen? Kompatibel mit allen Browser-Schreibmethoden

云罗郡主nach vorne: 2018-10-18 15:58:223497Durchsuche

Der Inhalt dieses Artikels handelt davon und hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

<body>
<p style="background-color:rgba(0,255,0,0.2);"> 显示文字 
</p> 
</body>

Transparenz über RGBA einstellen. Es unterstützt IE9+ und kann über den Alphakanal von RGBA eingestellt werden.
Die ersten drei Werte sind die RGB-Farbwerte und der letzte Transparenzwert liegt zwischen 0 und 1. Je kleiner der Wert, desto transparenter ist er.

Kompatibel mit allen Browsern Schreiben:

background-color:rgba（0,0,0,0.25）；
filter:progid:DXImageTransform.Microsoft.Gradient（startColorstr=#40000000,endColorstr=#40000000）；

Hinweis: Die ersten beiden Ziffern der Werte von startColorStr und endColorStr sind hexadezimale Transparenz und die letzten sechs Ziffern sind Hexadezimal.

Es hat das Format #AARRGGBB. AA, RR, GG und BB sind hexadezimale positive ganze Zahlen. Der Wertebereich liegt zwischen 00 und FF. RR gibt den Rotwert an, GG gibt den Grünwert an und BB gibt den Blauwert an, siehe #RRGGBB Farbeinheiten. AA legt Transparenz fest. 00 ist völlig transparent. FF ist völlig undurchsichtig. Werte außerhalb des Wertebereichs werden auf den Standardwert zurückgesetzt.

Konvertierungsmethode für 2-stellige Transparenz: x=alpha*255, konvertieren Sie einfach das berechnete Ergebnis x in hexadezimal.

JS-Konvertierungsmethode in Hexadezimal: x.toString(16)

Zum Beispiel: die obige 0,25-Transparenz, konvertiert in die AA-Transparenz des IE: var a = 0,25 * 255 = 63,75 ~= 64 ; a.toString(16) = 40

Beispiel: Das Festlegen der Transparenz für die Eingabe wirkt sich nicht auf untergeordnete Elemente aus (kompatibel mit IE8)

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
body{margin:0;padding:0;}
.div_content{
    background: url("1.gif") no-repeat;
    /*给input框添加背景图片，以凸显其透明效果。*/
    width: 200px;
    height: 200px;
}
.div_content>input{
    outline: none;
    border: none;
    background-color: transparent;
    /*必须将背景色设为透明，否则无效。（除非对于要设置的元素本身已经是透明的，如：span元素等）*/
    background-color: rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);
}
</style>
</head>
<body>
    <div  class="div_content">
        <input type="text" size="20"/>
    </div>
</body>

</html>

Das Obige ist die vollständige Einführung, wenn Sie mehr wissen möchten Für CSS-Video-Tutorial beachten Sie bitte die chinesische PHP-Website.

Das obige ist der detaillierte Inhalt vonWie stelle ich Transparenz in CSS ein, ohne die untergeordneten Elemente zu beeinflussen? Kompatibel mit allen Browser-Schreibmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Erläuterung zur Verwendung des Clip-Pfad-Attributs in CSS (mit Code)Nächster Artikel：Erläuterung zur Verwendung des Clip-Pfad-Attributs in CSS (mit Code)

In Verbindung stehende Artikel

Mehr sehen