CSS设置一个文字两种颜色

发布时间:2020-03-26 04:28:24发布者:admin浏览数:

CSS可以将一个文字设置为两种颜色,下面介绍一下如何实现此效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>.antzone{ display:inline-block; font-size:80px; line-height:80px; color:#000; position:relative; overflow:hidden; white-space:pre;}.antzone:before{ position:absolute; left:0; top:0; color:#f00; display:block; width:30%; content:attr(data-content); overflow:hidden;}</style></head><body><span class="antzone" data-content="蚂">蚂</span><span class="antzone" data-content="蚁">蚁</span><span class="antzone" data-content="部">部</span><span class="antzone" data-content="部">部</span></body></html>

上面的代码实现了我们的要求,下面简单介绍一下它的实现过程。

一.实现原理:

原理非常的简单,通过:before伪对象选择器,给span元素添加一个伪元素。

将此伪元素设置为绝对定位,这样就可以覆盖于原来span元素的内容之上。

然后为此伪元素设置和原来span元素一样的文本内容,并设置颜色,最后通过控制伪元素宽度的方式来设置文字的变色范围。

二.相关阅读:

(1).:before参阅CSS before/E::before一章节。

(2).相对定位和绝对定位参阅css absolute绝对定位和relative相对定位一章节。

(3).attr()参阅CSS的函数取值attr()一章节。

(4).content参阅CSS的content属性一章节。

  网站建设分类
程序开发 |  系统教程 |  软件应用 |  图形图像 |  网络应用 |  站长教程 |  网站建设 |  视频教程 |  硬件维护 |  IT资讯 |  中国it动力网
本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件!
如侵犯到您的权益,请及时通知我们,我们会及时处理。
Copyright @ 2019 中国it动力网 网站导航