Introduction à l'utilisation et à la compatibilité de la nouvelle propriété CSS3 currentColor

Ce chapitre vous expliquera l'utilisation du nouvel attribut CSS3 currentColor et la compatibilité de l'attribut currentColor. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

currentColor comme son nom signifie "couleur actuelle", pour être précis, il devrait s'agir de "couleur actuelle du texte", par exemple :

.xxx { border: 1px solid currentColor; }

currentColor signifie "la couleur du texte héritée par l'actuel label", Une autre façon de l'exprimer est : currentColor = la valeur de la couleur.

Partout où vous avez besoin d'utiliser une valeur de couleur, vous pouvez utiliser currentColor pour la remplacer, comme la couleur d'arrière-plan – couleur d'arrière-plan, la couleur du dégradé – dégradé, l'ombre de la boîte – l'ombre de la boîte, la couleur de remplissage SVG – remplir, etc. Très flexible et facile à utiliser !

Bien sûr, vous pouvez utiliser CSS pour évider la couleur d'arrière-plan, ce qui peut facilement contrôler la couleur de l'icône. Le principe de mise en œuvre est que la zone de forme de l'icône est transparente et creuse, tandis que la zone environnante est de couleur unie.

code css :

.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; }

code html :

更改颜色：<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>

code js :

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;
    }
};

Changez simplement la couleur de l'image de fond . Changez la couleur de l'image. Les versions inférieures d'IE sont également prises en charge.

Adresse de l'effet : http://www.zhangxinxu.com/study/201307/background-color-insert-background-image.html

Ensuite, utilisez currentColor maintenant Pour obtenir cet effet :

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

Nous voulons donc que le lien texte survolé par la souris change la couleur de son icône en conséquence, changez simplement la couleur du texte :

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

Explication :

La couleur par défaut de la bordure et de l'ombre de la boîte est la couleur actuelle du texte, qui est similaire à currentColor ;

Sous le navigateur iOS Safari (iOS8), currentColor présente encore quelques bugs. le pseudo-élément survole, la couleur d'arrière-plan de background:currentColor ne changera pas en conséquence. Que dois-je faire ? Attendez la mise à niveau ou utilisez la bordure pour simuler.

Compatibilité du navigateur currentColor :

Navigateurs pris en charge : Google, Firefox, QQ Browser, IE9+

Navigateurs non pris en charge : 360, navigateur de version inférieure IE

Pour une introduction détaillée, veuillez consulter : http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!