我们经常在很多网站上见到更改网站的主题时,图标的颜色也改变了,我们总是觉的这一项功能非常伟大,因为我们知道使用CSS是无法完成更改图片的颜色的。那么,网站上随心所欲的图标颜色是采用N多个图片不断的切换来实现的吗?
答案当然不是,我也曾想过无数次到底网站上的图标是如何更改颜色的,我甚至曾想到它是使用颜色彩笔动态创建的矢量图形,当然结果你也知道了,肯定不是这样的,下面我来告诉大家事实的真像。
我们在网站看到的图片可以像文字一样随意改变颜色的图形,其实它本身就是一种文字,只不过这些文字并不是我们平常所使用的各种字体的文字,它是一种图标文字,是设计师们使用“专用字符编辑程序”而创建的图标字体。这样我们就可以使用CSS更改所谓的图片(即图标文字)的颜色。
HTML源代码:
1
2
3
4
|
<
div
class
=
"smail"
>
<
em
class
=
"status"
>我很高兴 </
em
>
<
em
class
=
"status unHappy"
> 哥很忧郁</
em
>
</
div
>
|
CSS源代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.status:BEFORE {
color
:
red
;
content
:
""
;
font-size
:
22px
;
font-style
:
normal
;
left
:
0
;
position
:
absolute
;
top
:
8px
;
text-align
:
center
;
width
:
21px
;
}
.status {
display
:
block
;
font-size
:
11px
;
line-height
:
12px
;
margin-bottom
:
20px
;
padding
:
2px
0
2px
26px
;
position
:
relative
;
}
.unHappy:before {
content
:
""
;
color
:
blue
;
font-size
:
22px
;
}
|
CSS更改图片效果图如下:
结束语:很多复杂的事情,其实本是很简单的事,只是我们想的复杂了,所以就把事情处理的复杂了。
本文转自 genuinecx 51CTO博客,原文链接:http://blog.51cto.com/favccxx/1317180,如需转载请自行联系原作者