Have you used the new currentColor attribute of css3? Use and compatibility, css3currentcolor

Have you used the new currentColor attribute of css3? Use and compatibility, css3currentcolor

currentColorThe idea is "current color", which should be "Current text color" accurately, for example:

.xxx { border: 1px solid currentColor; }

currentColorIndicates the "color of the text inherited by the current label", and the other way is:CurrentColor = color value.

You can use color values wherever they are needed.currentColorReplace, for example, the background color-background-color, Gradient-gradient, Box shadow-box-shadow, SVG fill color-fillAnd so on. Flexible and easy to use!

Of course, you can use css to implement the background color hollow out, so that you can easily control the color of the icon. The principle is that the shape area of the icon is transparent and hollow, while the surrounding area is solid.

CSS code :. icon {display: inline-block; width: 16px; height: 20px; background-image: url(sprite_icons.png); background-color: # 34538b; /* the color of the color control icon */}. 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: change color: <input id = "colorInput" type = "color" value = "# 34538b" autocomplete = "off"> <p> <I class = "icon icon1"> </I> <a href = "#" class = "link"> return </a> <I class = "icon icon2"> </I> <a href = "##" class = "link"> refresh </a> <I class = "icon icon3"> </I> <a href = "#" class = "link"> favorites </a> <I class = "icon icon4"> </I> <a href = "#" class = "link"> Expand an image </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 ;}};

You only need to change the color of the background image to change the color of the image. Earlier versions of IE are also supported.

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

Now, use currentColor to achieve this effect:

. Icon {display: inline-block; width: 16px; height: 20px; background-image: url (.. /201307/sprite_icons.png); background-color: currentColor;/* color of the color control icon */}

As a result, we want to move the mouse to the hover text link, and the icon color will change with each other, as long as the text color is changed:

. Link: hover {color: #333;}/* although the text color is changed, the icon color is also changed */

Note:

borderAndbox-shadowThe default color is the current text color, which is similarcurrentColor;

In iOS Safari (iOS8,currentColorThere are still some bugs, such as the pseudo-element hover,background:currentColorThe background color will not change. What should I do? Or use border to simulate the upgrade.

currentColorBrowser compatibility:

Supported browsers: Google, Firefox, QQ browser, IE9 +

Unsupported browsers: 360 and earlier IE browsers

For more information, see: http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/