CSS背景色镂空技术实战：实现颜色可控图标的两种方法

脚本专家

在CSS开发中，经常需要为网页制作图标，常规做法是使用固定颜色的PNG图标，但若想灵活改变图标颜色，往往需要重新制作素材。本文介绍一种背景色镂空技术，利用CSS的background-color或color属性，让图标颜色随父级文本颜色变化，从而实现单套素材、任意颜色切换的效果。

## 一、背景色镂空原理

所谓背景色镂空，是指图标区域本身是透明镂空的，而周围部分是实色填充。这样，通过控制容器背景色（即镂空区域露出的颜色），就能改变图标呈现的颜色。该技术的优点是：只需一张包含多个图标的Sprite图（图标形状为透明，周围为纯色），通过CSS的background-color就能轻松调整图标颜色，省去为不同颜色制作单独图标的工作。

## 二、使用background-color控制图标颜色

这是最直接的方法。将图标形状做成透明，Sprite图周围填充任意纯色（如白色）。然后在CSS中为图标容器设置background-image为Sprite图，并指定background-color为目标颜色。实际显示时，镂空部分会透出背景色，形成彩色图标。

示例代码如下：

2. .icon {
3.   display: inline-block;
4.   width: 16px;
5.   height: 20px;
6.   background-image: url(sprite_icons.png);
7.   background-color: #34538b; /* 该颜色控制图标的颜色 */
8. }
10. .icon1 { background-position: 0 0; }
11. .icon2 { background-position: -20px 0; }
12. .icon3 { background-position: -40px 0; }
13. .icon4 { background-position: -60px 0; }

复制代码

HTML中通过<i>标签添加图标：

2. <i class="icon icon1"></i><a href="#" class="link">返回</a>
3. <i class="icon icon2"></i><a href="#" class="link">刷新</a>
4. <i class="icon icon3"></i><a href="#" class="link">收藏</a>
5. <i class="icon icon4"></i><a href="#" class="link">展开图片</a>

复制代码

这种方式的局限性在于：图标背景必须为纯色，且图标本身只能是纯色或渐变形状。此外，图标颜色无法直接继承父元素的color属性，只能通过background-color单独指定，灵活性不够。

## 三、进阶：利用字符和伪元素让图标颜色继承父级color

为了让图标的颜色直接与文字颜色一致（继承父元素的color），可以采用“字符+伪元素”的方案。核心思路：在图标容器内使用一个块状字符（如“█”）作为实色背景，然后通过伪元素叠加镂空背景图，利用字符的color属性控制显示颜色。

该方案依赖:before和:after伪元素，支持IE8及以上浏览器。CSS实现如下：

2. .icon {
3.   display: inline-block;
4.   width: 16px;
5.   height: 20px;
6.   overflow: hidden;
7.   position: relative;
8. }
10. .icon:before {
11.   content: '█';
12.   margin: -5px 0 0 -5px;
13.   font-size: 30px;
14.   position: absolute;
15. }
17. .icon:after {
18.   content: '';
19.   display: block;
20.   width: 100%;
21.   height: 100%;
22.   background-image: url(sprite_icons.png);
23.   position: relative;
24. }
26. .icon1:after { background-position: 0 0; }
27. .icon2:after { background-position: -20px 0; }
28. .icon3:after { background-position: -40px 0; }
29. .icon4:after { background-position: -60px 0; }

复制代码

父元素定义color即可控制图标颜色：

2. .out { color: #34538b; }

复制代码

HTML结构：

2. <div class="out">
3.   <i class="icon icon1"></i><a href="#" class="link">返回</a>
4.   <i class="icon icon2"></i><a href="#" class="link">刷新</a>
5.   <i class="icon icon3"></i><a href="#" class="link">收藏</a>
6.   <i class="icon icon4"></i><a href="#" class="link">展开图片</a>
7. </div>

复制代码

## 四、兼容IE6/IE7的方案

如果不介意额外增加一层标签，可以使用一个<s>元素配合“█”字符实现兼容。核心还是通过字符color控制实色背景，s元素承载镂空背景图叠加在上层。

CSS：

2. .icon {
3.   display: inline-block;
4.   width: 16px;
5.   height: 20px;
6.   line-height: 20px;
7.   font-size: 30px;
8.   overflow: hidden;
9.   position: relative;
10. }
12. .icon s {
13.   width: 100%;
14.   height: 100%;
15.   background-image: url(sprite_icons.png);
16.   position: absolute;
17.   left: 0;
18.   top: 0;
19. }
21. .icon1 s { background-position: 0 0; }
22. .icon2 s { background-position: -20px 0; }
23. .icon3 s { background-position: -40px 0; }
24. .icon4 s { background-position: -60px 0; }
26. .out { color: #34538b; }

复制代码

HTML：

2. <div class="out">
3.   <i class="icon icon1"><s></s>█</i><a href="#" class="link">返回</a>
4.   <i class="icon icon2"><s></s>█</i><a href="#" class="link">刷新</a>
5.   <i class="icon icon3"><s></s>█</i><a href="#" class="link">收藏</a>
6.   <i class="icon icon4"><s></s>█</i><a href="#" class="link">展开图片</a>
7. </div>

复制代码

## 五、总结

背景色镂空技术是一种巧妙的CSS图标方案，适合在纯色或渐变图标上实现颜色控制。当需要图标颜色与文本颜色同步时，借助Unicode字符和伪元素（或额外标签）即可实现。实际项目中可根据浏览器兼容性要求选择合适的方法，从而减少图片资源，提高样式维护效率。

热心网友7

这篇分享很实用，一直纠结于图标颜色不好改的问题，背景色镂空确实能省去很多重复切图的工作。第二种用字符和伪元素继承color的方法尤其巧妙，之前没想过用“█”这个字符来做实色背景，思路很新颖。不过想请教一下，如果图标本身有渐变或者半透明效果，这两种方法还适用吗？还是只适合纯色图标？