Detaillierte Erläuterung der RGBA-Kompatibilitätsverarbeitungsmethode-CSS-Tutorial-php.cn

Detaillierte Erläuterung der RGBA-Kompatibilitätsverarbeitungsmethode

高洛峰

Freigeben： 2017-03-21 14:36:32

Original

1900 Leute haben es durchsucht

Laut caniuse (http://caniuse.com/#search=rgba) ist RGBA mit Browsern ab IE9 und höher kompatibel.

Detaillierte Erläuterung der RGBA-Kompatibilitätsverarbeitungsmethode

Beispielcode:

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>rgba 兼容性处理</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                background-color: rgba(0, 0, 0, 0.5);
            }
        </style>
    </head>

    <body>
        <div>
            rgba
        </div>
    </body>

</html>

Nach dem Login kopieren

Chrome-Browsereffekt:

Detaillierte Erläuterung der RGBA-Kompatibilitätsverarbeitungsmethode

IE8-Browsereffekt (kein Hintergrund):

Detaillierte Erläuterung der RGBA-Kompatibilitätsverarbeitungsmethode

Rgba-Kompatibilitätsverarbeitung:

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                background: rgba(0, 0, 0, 0.5);
                /*下一句关键设置*/
                filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f000000);
            }

Nach dem Login kopieren

Filterattribut festlegen Der Zweck ist Wird ausgeführt, wenn die Transparenz der vorherigen Zeile nicht funktioniert. Filter: progid:DXImageTransform.Microsoft.gradient wird zum Erstellen von Farbverläufen verwendet, hier ist jedoch kein Farbverlauf erforderlich, sodass beide Farben auf die gleiche Farbe eingestellt sind.

Diese Farbe „#7f000000“ besteht aus zwei Teilen.

Der erste Teil ist 7f nach der Zahl #. Ist der IEfilter-Wert der RGBA-Transparenz 0,5? Jede Zahl von 0,1 bis 0,9 entspricht einem IEfilter-Wert. Die entsprechende Beziehung ist wie folgt:

Detaillierte Erläuterung der RGBA-Kompatibilitätsverarbeitungsmethode

Das heißt: Der durch Alpha*255 erhaltene Wert kann in Hexadezimal umgewandelt werden.

Der zweite Teil besteht aus den sechs Ziffern nach 7f , einem hexadezimalen Farbwert, der beispielsweise dem entsprechenden Wert in der RGB-Funktion entspricht zu rgb(255.255.255) #ffffff.

Zusammenfassung: Damit ist die RGBA-Kompatibilitätsverarbeitung für IE8 und niedrigere IE-Browser abgeschlossen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der RGBA-Kompatibilitätsverarbeitungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!