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; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */

참고:

테두리 및 상자 그림자의 기본 색상은 현재 텍스트 색상으로, currentColor와 유사합니다.

iOS Safari 브라우저(iOS8)에서 currentColor에는 여전히 일부 버그가 있습니다. 예를 들어 의사 요소가 마우스를 가리키면 background:currentColor의 배경색이 그에 따라 변경되지 않습니다. 업그레이드를 기다리거나 테두리를 사용하여 시뮬레이션하세요.

현재 컬러 브라우저 호환성:

지원 브라우저: Google, Firefox, QQ 브라우저, IE9+

지원되지 않는 브라우저: 360, IE 하위 버전 브라우저

자세한 소개를 확인하세요: http://www.zhangxinxu. com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/

위 내용은 CSS3 새 속성 currentColor의 사용 및 호환성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!