使用CSS更改图标的颜色
来源:互联网 发布:2016年来华留学生数据 编辑:程序博客网 时间:2024/04/29 14:24
我们经常在很多网站上见到更改网站的主题时,图标的颜色也改变了,我们总是觉的这一项功能非常伟大,因为我们知道使用CSS是无法完成更改图片的颜色的。那么,网站上随心所欲的图标颜色是采用N多个图片不断的切换来实现的吗?
答案当然不是,我也曾想过无数次到底网站上的图标是如何更改颜色的,我甚至曾想到它是使用颜色彩笔动态创建的矢量图形,当然结果你也知道了,肯定不是这样的,下面我来告诉大家事实的真像。
我们在网站看到的图片可以像文字一样随意改变颜色的图形,其实它本身就是一种文字,只不过这些文字并不是我们平常所使用的各种字体的文字,它是一种图标文字,是设计师们使用“专用字符编辑程序”而创建的图标字体。这样我们就可以使用CSS更改所谓的图片(即图标文字)的颜色。
<div class="smail"><em class="status">我很高兴 </em> <em class="status unHappy"> 哥很忧郁</em></div>
.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更改图标的颜色
- Css更改placeholder颜色
- 下部选项卡使用的图标,点击时改变颜色.css雪碧图
- HTML CSS 鼠标鼠标选中的更改颜色
- 更改状态栏里面图标字体颜色
- 更改listctrl的图标
- wincelogo图标的更改
- 更改IE 的图标
- 更改应用程序的图标
- checkbox 颜色的更改
- 应用图标的颜色
- 颜色配置,使用eclipse保护眼睛的秘诀,更改字体大小
- 如何更改文件夹的图标!如何更改文件的图标!
- 如何更改文件的图标
- 动态更改QToolButton的图标
- 更改QT程序的图标
- 系统图标变小的更改
- 更改app图标的方法
- CALayer简单教程
- 学习杂记
- 很好的一个面试总结
- PHP实现今天是星期几的几种写法
- OCP-1Z0-052-V8.02-183题
- 使用CSS更改图标的颜色
- 线程安全总结(二)
- cocos2d-x总结(一)HelloWord
- Hadoop中的各种排序
- C++类模板做特化
- Overloading Methods in WCF
- iOS6 SDK新特性
- C++异常处理
- widows相关命令