首先来瞄一下background-clip,这个属性是干嘛的？

顾名思义，背景裁剪...   按照我自己的理解就是背景的显示区域

此处粘上MDN的示例链接（嫌麻烦的，后面我也贴上截图）https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip

background-clip共有4个属性值，默认是border-box

padding-box(背景显示区域不包括边框线)

content-box(背景显示区域只有内容)

最后一个属性值：text，也就是做文字渐变的重点了，这个效果类似于PS里的剪贴蒙版，效果图：

代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="./index.css">

</head>

<style>

    .box{

        display: inline-block;

        font-size: 48px;

        font-weight: bold;

        background:linear-gradient(45deg,red,blue,yellow,green);

        background-clip: text;

        -webkit-background-clip: text;

        color:transparent;

    }

    p{

        margin:0;

    }

</style>

<body>

    <div class="box">

        <p>落魄前端</p>

        <p>在线炒粉</p>

    </div>

</body>

那这个属性兼容性方面又怎么样呢？

目前IE浏览器不支持 text，其他浏览器则需要加上兼容前缀，但其他属性值大部分都支持了（真是个让人伤心的消息）

不过这个属性用来做文字的渐变确实很方便，还可以将背景图片剪贴到文字上

css Backgroud-clip (文字颜色渐变)的更多相关文章

  1. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  3. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  4. css文字颜色渐变的3种实现

    在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...

  5. css过滤镜实现颜色渐变

    语法:filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , startColorStr=iWidth , e ...

  6. CSS3 loading 和 文字颜色渐变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

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

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

  9. css颜色渐变在不同浏览器的设置

    在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 ...

随机推荐

  1. Linux下mysql的主从复制配置

    1.准备两台数据库环境,或者单台多实例环境,能正常启动和登录. 数据库的安装和多实例配置请参考https://www.cnblogs.com/qiuhom-1874/p/9757061.html. 2 ...

  2. C#索引器与数组的区别

    1.索引器的索引值类型不限定为整数 2.索引器允许重载 3.索引器不是一个变量 4.索引器以函数签名方式this标识,而属性采用名称来标识,名称可以任意 5.索引器不能使用static来进行声明,属性 ...

  3. Linux常用命令复习

    1> 查看文件信息:ls ls是英文单词list的简写,其功能为列出目录的内容,是用户最常用的命令之一,它类似于DOS下的dir命令. Linux文件或者目录名称最长可以有265个字符,“.”代 ...

  4. 轻松实现C/C++各种常见进制相互转换

    其它进制转为十进制 在实现这个需求之前,先简单介绍一个c标准库中的一个函数: long strtol( const char *str, char **str_end, int base); 参数详细 ...

  5. spark-宽依赖和窄依赖

    一.窄依赖(Narrow Dependency,) 即一个RDD,对它的父RDD,只有简单的一对一的依赖关系.也就是说, RDD的每个partition ,仅仅依赖于父RDD中的一个partition ...

  6. PHP 向数组头部插入数据

    PHP 向数组头部插入数据 函数: array_unshift() 示例: $s = array('a' => 0, 'b' => 3); array_unshift($s, '5'); ...

  7. nyoj 733-万圣节派对 (printf("%06d", i))

    733-万圣节派对 内存限制:64MB 时间限制:1000ms 特判: No 通过数:5 提交数:7 难度:1 题目描述: 万圣节有一个Party,XadillaX显然也要去凑热闹了.因为去凑热闹的人 ...

  8. opencv各种小例子

    图像腐蚀 #include <opencv2/highgui/highgui.hpp>//OpenCV highgui 模块头文件 ~ #include <opencv2/imgpr ...

  9. Python的os，shutil和sys模块

    *********OS*********** os.sep 可以取代操作系统特定的路径分隔符.windows下为 '\\' os.name 字符串指示你正在使用的平台.比如对于Windows,它是'n ...

  10. Spring（Bean）1

    Spring支持3种依赖注入的方式 (DI依赖注入)*属性注入 (配置bean set方法注入) <bean id="car" class="spring.bean ...