The practical application and advanced sharing of the CSS background color hollowing technology

This article mainly introduces the CSS background color hollowing technology practical application and advanced related data, need friends can refer to the following

 

One, the background color hollow? What the hell?

In fact, in 10, 3 years ago I introduced the background color hollowing technology, the article is called: "Use CSS to achieve Photoshop selection effect and application."

The effect is similar to the following. Virtual frame is an animated GIF background, fruit picture 1 pixel hollow, so it has effect!

Today, when I went over the wall to Twitter, I saw a more practical application of this technique.

Look at the screenshot shown below:

Question: How are these small icons implemented?

Now, our general practice is to open Photoshop, pull these icons out, and then make the perimeter transparent to use on a variety of backgrounds.

However, Twitter has the opposite effect, the icon shape area is transparent hollow, and the surrounding is solid color.

This implementation of the advantages of self-evident, can be very comfortable to control the color of small icons, and this control is CSS background-color .

second, background-color and background image hollowing technology

You can ruthlessly click here: Background color hollowing technology and color controllable icon Demo

In Chrome browser, there are color controls:

Copy Code code as follows:


. Icon {


Display:inline-block;


width:16px; height:20px;


Background-image:url (sprite_icons.png);


Background-color: #34538b; * * The Color control icon Color/


}


. icon1 {background-position:0 0;}


. Icon2 {background-position: -20px 0;}


. Icon3 {background-position: -40px 0;}


. icon4 {background-position: -60px 0;} <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" > Collection </a>


<i class= "icon icon4" ></i><a href= "# #" class= "link" > Expand picture </a>

Iii. Limitations of the technology

Limitations have two points:

The background color of the icon is solid and does not change frequently;
You can use this technique only if you have a solid color or a gradient icon.
Iv. further improvement of-color implementation
The following for their own attempts, there is no large-scale testing, may be some countries or some equipment will have problems, welcome feedback.

The Background-color control icon color is already very flexible, but it is not flexible enough. For example, I would like the color of the icon directly with the following text, text color can inherit directly from the parent, but if the icon is Background-color implementation, you can not inherit, that can use color to achieve the icon effect?

The answer is YES!

The idea is as follows, use the character Fu Shi realistic color background effect; Then, the hollow background picture is covered above, so the effect realizes, over!

There are many strange characters in the brain, therefore, the first reaction is this fellow: █, the word fonts write is a block area. "Boss, a gourd," ██████.

We slightly let this character font size larger, you can support the icon container, so, color implementation of the pseudo background color effect can be achieved!

A case of top thousand words, you can ruthlessly click here: Background color Hollow technology color properties to achieve a control icon demo

Above for the single label implementation, so the use of before and after pseudo elements, therefore, ie8+ browser support, ie6/ie7 browser soy sauce ...

Baidu is currently browsing the institute's data to see, ie6/ie7 outside the browser has exceeded 80%+, therefore, the conditions allow, the two browsers can be ignored.

The relevant CSS is as follows:

Copy Code code as follows:


. Icon {


Display:inline-block;


width:16px; height:20px;


Overflow:hidden;


position:relative;


}


. Icon:before {


content: ' █ ';


margin: -5px 0 0-5px;


font-size:30px;


Position:absolute;


}


. icon:after {


content: ';


Display:block;


width:100%; height:100%;


Background-image:url (sprite_icons.png);


position:relative;


}


. icon1:after {background-position:0 0;}


. icon2:after {background-position: -20px 0;}


. icon3:after {background-position: -40px 0;}


. icon4:after {background-position: -60px 0;}


. Out {color: #34538b;///} The Color control icon on the parent label/}

If you want to be compatible with IE6/IE7 browsers, it is also possible to require one more layer of tabs, as follows:

Copy Code code as follows:


<p class= "Out" >


<i class= "icon icon1" ><s></s>█</i><a href= "# #" class= "link" > Return </a>


<i class= "icon icon2" ><s></s>█</i><a href= "# #" class= "link" > Refresh </a>


<i class= "icon icon3" ><s></s>█</i><a href= "# #" class= "link" > Collection </a>


<i class= "icon icon4" ><s></s>█</i><a href= "# #" class= "link" > Expand picture </a>


</p>

Copy Code code as follows:


. Icon {


Display:inline-block;


width:16px; height:20px;


line-height:20px;


font-size:30px;


Overflow:hidden;


position:relative;


}


. Icon S {


width:100%; height:100%;


Background-image:url (sprite_icons.png);


Position:absolute; left:0; top:0;


}


. icon1 s {background-position:0 0;}


. icon2 S {background-position: -20px 0;}


. Icon3 S {background-position: -40px 0;}


. icon4 S {background-position: -60px 0;}


. Out {color: #34538b;///} The Color control icon on the parent label/}

You can ruthlessly click here: Background Color +color property to achieve Color control icon compatible IE6/IE7 demo

The following image is a screenshot of the IE7 browser:

Reprint please specify from ROK Zhang Xinsen-Xin space-Xin Life