使用CSS更改图标的颜色
2024-08-27 21:22:58
我们经常在很多网站上见到更改网站的主题时,图标的颜色也改变了,我们总是觉的这一项功能非常伟大,因为我们知道使用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;
- }
结束语:很多复杂的事情,其实本是很简单的事,只是我们想的复杂了,所以就把事情处理的复杂了。
最新文章
- startUML破解方式
- mysql 主主互备
- 【转】【C++】ShellExecute, WinExec, CreateProcess 三者的区别
- SQL 替换指定列中的指定字符串
- Java多线程——<;三>;简单的线程执行:Executor
- Oracle 动态视图1 V$LOCK
- [原]Unity3D深入浅出 - 认识开发环境中的自带的Package资源包
- Oracle-12541:TNS:无监听程序 .
- Python进阶之map()、reduce()、filter()
- Netty 学习 一、初识Netty【原创】
- 详解RPC远程调用和消息队列MQ的区别
- osg做的路面项目
- 正则表达式andJS内存空间详细图解
- shiro + jwt 实现 请求头中的 rememberMe 时间限制功能
- Linux常用基本命令:tr-替换或者删除字符
- el-table-column v-if条件渲染报错h.$scopedSlots.default is not a function
- 伪静态与重定向--RewriteBase
- 【Hive学习之二】Hive SQL
- java常用技术名词解析
- 高阶函数map(),filter(),reduce()