Einführung in die Verwendung und Kompatibilität der neuen CSS3-Eigenschaft currentColor

In diesem Kapitel erfahren Sie mehr über die Verwendung des neuen CSS3-Attributs currentColor und die Kompatibilität des currentColor-Attributs. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

currentColor, da der Name „aktuelle Farbe“ bedeutet, sollte es genau genommen „aktuelle Textfarbe“ sein, zum Beispiel:

.xxx { border: 1px solid currentColor; }

currentColor bedeutet „die vom aktuellen Label geerbte Textfarbe“ Alternativ kann man es so ausdrücken: currentColor = der Wert der Farbe.

Wo immer Sie einen Farbwert verwenden müssen, können Sie ihn mit currentColor ersetzen, z. B. Hintergrundfarbe – Hintergrundfarbe, Verlaufsfarbe – Verlauf, Kastenschatten – Kastenschatten, SVG-Füllfarbe – Füllung, usw. Sehr flexibel und einfach zu bedienen!

Natürlich können Sie CSS verwenden, um die Hintergrundfarbe auszuhöhlen, wodurch Sie die Farbe des Symbols leicht steuern können. Das Implementierungsprinzip besteht darin, dass der Symbolformbereich transparent und hohl ist, während der umgebende Bereich einfarbig ist.

CSS-Code:

.icon {
    display: inline-block;
    width: 16px; height: 20px;
    background-image: url(sprite_icons.png);
    background-color: #34538b; /* 该颜色控制图标的颜色 */
}
.icon1 { background-position: 0 0; }
.icon2 { background-position: -20px 0; }
.icon3 { background-position: -40px 0; }
.icon4 { background-position: -60px 0; }
.link { margin-right: 15px; }

HTML-Code:

更改颜色：<input id="colorInput" type="color" value="#34538b" autocomplete="off">
<p>
    <i class="icon icon1"></i><a href="##" class="link">返回</a>
    <i class="icon icon2"></i><a href="##" class="link">刷新</a>
    <i class="icon icon3"></i><a href="##" class="link">收藏</a>
    <i class="icon icon4"></i><a href="##" class="link">展开图片</a>
</p>

JS-Code:

var eleInput = document.getElementById("colorInput"),
    eleIcons = document.getElementsByTagName("i");
eleInput.onchange = function() {    var i = 0, l = eleIcons.length;    for (; i<l; i+=1) {
        eleIcons[i].style.backgroundColor = this.value;
    }
};

Sie müssen nur die Farbe des Hintergrundbilds ändern, um das zu ändern Farbe des Bildes. Niedrigere Versionen des IE werden ebenfalls unterstützt.

Effektadresse: http://www.zhangxinxu.com/study/201307/background-color-insert-background-image.html

Dann verwenden Sie jetzt currentColor Um diesen Effekt zu erzielen:

.icon {
    display: inline-block;
    width: 16px; height: 20px;
    background-image: url(../201307/sprite_icons.png);
    background-color: currentColor; /* 该颜色控制图标的颜色 */
}

Wir möchten also, dass sich die Symbolfarbe des Mauszeigertext-Links entsprechend ändert:

.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */

Anleitung:

Die Standardfarbe von Rahmen und Boxschatten ist die aktuelle Textfarbe, die currentColor ähnelt. Unter dem iOS-Safari-Browser (iOS8) weist currentColor immer noch einige Fehler auf, z. B. das Schweben von Pseudoelementen. Die Hintergrundfarbe von „background:currentColor“ ändert sich nicht entsprechend. Was soll ich tun? Warten Sie auf das Upgrade oder verwenden Sie den Rahmen zur Simulation.

CurrentColor-Browserkompatibilität:

Unterstützte Browser: Google, Firefox, QQ Browser, IE9+

Nicht unterstützte Browser: 360, IE-Browser mit niedrigerer Version

Eine ausführliche Einführung finden Sie unter:

http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung und Kompatibilität der neuen CSS3-Eigenschaft currentColor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!