css彩虹文字
用CSS3实现彩虹文字的效果,只在Webkit内核的浏览器(谷歌浏览器或移动端)上有效果。
background-image:
-webkit-gradient(linear, left top, right top, color-stop(0, #f22),
color-stop(0.15, #f2f),
color-stop(0.3, #22f),
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2),
color-stop(0.9, #ff2),
color-stop(1, #f22));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;
来看看具体的效果:
原理是将文字设置为透明,然后通过背景图片中的渐变给透明的文字上色。
"有时候,虽然能想明白,但心里就是接受不了。"
css彩虹文字的更多相关文章
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- css控制文字长度,超出长度显示...
css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...
- (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号
css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...
- 用CSS让文字居于div的底部
css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...
- --css 控制文字多使用省略号
--css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...
- div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
- CSS控制文字显示一行,超出显示省略号
这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...
- CSS实现文字竖排排版
CSS实现文字竖排 注意: writing-mode: vertical-rl;存在兼容性问题,在IE上正常,在谷歌的低版本上可能识别不了. 如果文字少的话考虑直接在每一个文字中间加一个<br& ...
- CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
随机推荐
- 【LOJ#573】【LNR#2】单枪匹马(线段树)
[LOJ#573][LNR#2]单枪匹马(线段树) 题面 LOJ 题解 考虑拿线段树维护这个值,现在的问题就是左右怎么合并,那么就假设最右侧进来的那个分数是\(\frac{x}{y}\)的形式,那么就 ...
- 使用zabbix监控linux的io
zabbix自带的监控linux的模板中并没有监控io这项,而实际生产中又需要监控io,如何监控呢. 错误的示例 这里我特意贴出错误的示例出来,是因为我在网上搜如何使用zabbix监控io的文章时,好 ...
- Linux帮助——常用命令
Linux帮助——常用命令 摘要:本文主要学习了Linux系统中常用的一些命令. uname命令 uname命令可以显示电脑以及操作系统的相关信息. 基本语法 uname [选项] 选项说明 -a:显 ...
- Tasteless challenges hard WP
hard Level 5- Fred CMS 十有八九是注入,不过测试引号和转义符并没发现什么,于是跑了下密码字典,竟然发现网页提示 sql injection detected! ,然后发现原来是密 ...
- 在Dynamics CRM中自定义一个通用的查看编辑注释页面
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复162或者20151016可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 注释在CRM中的显示是比较特别, ...
- ABP进阶教程9 - CSV导出中文乱码
点这里进入ABP进阶教程目录 问题描述 功能按钮 - 导出CSV,中文信息导出为乱码. 解决方案 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\View ...
- WC 个人项目 ( node.js 实现 )
基于 node.js 的 wordCounter 个人项目 GitHub 项目地址:https://github.com/KofeChen/node.js-WordCounter 实现功能: 能够匹配 ...
- [转]Eclipse插件开发之基础篇(2) 第一个Eclipse插件
原文地址:http://www.cnblogs.com/liuzhuo/archive/2010/08/15/eclipse_plugin_1_1_1.html 在Eclipse中使用PDE(Plug ...
- [转]JVM系列二:GC策略&内存申请、对象衰老
原文地址:http://www.cnblogs.com/redcreen/archive/2011/05/04/2037056.html JVM里的GC(Garbage Collection)的算法有 ...
- Python—五大基本语句
五大基本语句 赋值语句(变量.对象.赋值运算符) 输入输出语句(input,print函数) 条件判断语句(if-elif-else语句) 循环语句(遍历循环for-in-else.条件循环while ...