CSS3 の新しいプロパティ currentColor の使用法と互換性の概要

この章では、新しい CSS3 属性 currentColor の使用方法と currentColor 属性の互換性について説明します。困っている友人は参考にしていただければ幸いです。

currentColor という名前は「現在の色」を意味します。正確には「現在のテキストの色」でなければなりません。例:

.xxx { border: 1px solid currentColor; }

currentColor は「現在のラベルによって継承されたテキストの色」を意味します。または、それを表現する方法は次のとおりです: currentColor = 色の値。

背景色 - 背景色、グラデーション カラー - グラデーション、ボックス シャドウ - ボックス シャドウ、SVG 塗りつぶし色 - 塗りつぶしなど、色の値が必要な場合は常に currentColor を使用して置き換えることができます。非常に柔軟で使いやすいです!

もちろん、CSS を使用して背景色をくりぬくこともでき、アイコンの色を簡単に制御できます。実装の原則は、アイコンの形状領域が透明で中空であり、その周囲の領域が単色であることです。

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

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>

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

背景画像の色を変更するだけで、画像の色。 IE の下位バージョンもサポートされています。

効果アドレス:http://www.zhangxinxu.com/study/201307/background-color-insert-background-image.html

次に、currentColor を使用します。この効果を実現するには:

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

したがって、マウス ホバー テキスト リンクとそのアイコンの色をそれに応じて変更したいので、テキストの色を変更するだけです:

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

手順:

border と box-shadow のデフォルトの色は currentColor に似た現在のテキストの色です。

iOS Safari ブラウザ (iOS8) では、currentColor には疑似要素のホバーなどのいくつかのバグがまだあります。の場合、background:currentColor の背景色は変更されません。どうすればよいですか?アップグレードを待つか、ボーダーを使用してシミュレーションしてください。

currentColor ブラウザの互換性:

サポートされているブラウザ: Google、Firefox、QQ ブラウザ、IE9

サポートされていないブラウザ: 360、IE 下位バージョンのブラウザ

詳しい紹介については、http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/

をご覧ください。

以上がCSS3 の新しいプロパティ currentColor の使用法と互換性の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。