css彩色文字也称渐变文字

在张鑫旭博客首页看到这效果,就自己研究了一下。

实现方法加个背景然后在根据文本剪切,再把文本填充为透明色让之前设置的背景颜色显示出来即可。

 -webkit-background-clip: text;根据文本剪切
 -webkit-text-fill-color: transparent;填充为透明色让之前设置的背景颜色显示出来

css

p {
background: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
-webkit-background-clip: text;/*背景颜色以文本方式剪切*/
-webkit-text-fill-color: transparent;/*文字填充为透明色让设置的渐变色显示出来,一定要设置为透明色不然设置的渐变色无法显示出来,会被遮挡住*/
}

HTML

<p>不是权威指南那种干巴巴的知识,都是从实践角度出发进行剖析和阐述,可以直接落地于生产开发的CSS知识。同时,常年写作历练使得自己知道该如何把深入的知识通过通俗易懂的方式表达出去,因此,</p>

效果图

css彩色(渐变)文字的更多相关文章

  1. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  2. 巧用 CSS 构建渐变彩色二维码

    今日,群里有个很有意思的问题,问我如何实现一个彩色的,带渐变的二维码,像是这样: 很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维 ...

  3. 神奇的 CSS,让文字智能适配背景颜色

    最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看 ...

  4. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

  5. 小tip:CSS3下的渐变文字效果实现——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...

  6. CSS线性渐变

    /*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...

  7. CSS文本与文字

    -255之间 14.2 CSS中的文字属性 属性名称                    属性值                       说明 font-style          norma ...

  8. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

  9. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

随机推荐

  1. 03:linux文件操作四剑客

    1.1 find查找命令 1.find命令说明 1. Linux find命令用来在指定目录下查找文件. 2. 任何位于参数之前的字符串都将被视为欲查找的目录名. 3. 如果使用该命令时,不设置任何参 ...

  2. Python基础字符串前加u,r,b,f含义

    1.字符串前加 u 例:u"我是含有中文字符组成的字符串." 作用: 后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格式问题,导致再次使用时 ...

  3. python_0基础开始_day07

    第七节 1,基础数据类型补充 str: print(str.capitalize()) —— 首字母大写 print(str.title()) —— 每个单词的首字母大写 print(str.swap ...

  4. idea 去除重复代码提醒

  5. 使用zookeeper报错 stat is not executed because it is not in the whitelist. envi is not executed because it is not in the whitelist.

    在使用四字命令或者zk ui界面查看zookeeper集群时,出现如下提示: stat is not executed because it is not in the whitelist. envi ...

  6. cube-ui indexList的正确使用

    demo地址:https://github.com/zphtown/cube-ui-bug 上拉和下拉核心代码: onPullingDown () { this.isNoMore = false th ...

  7. 重学HTML5的语义化

    干了这么多年的前端,之前面试的时候经常会遇到面试官提问:你是如何理解HTML的语义化的? 说实话,之前遇到这个问题的时候,都是从网上找参考答案,然后记下来,用自己的语言重新组织一下,就变成自己的理解了 ...

  8. JQuery——关于CDN(内容分发网络)

    替代方案 如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它. Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuery . 如果你的 ...

  9. dedecms 公共模板写法 提高生成速度

    {dede:include file="/temp/liuxingfushi.html" ismake='no'/}

  10. Delphi ComboBox组件