首先来瞄一下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. Apache Spark 3.0 预览版正式发布，多项重大功能发布

    2019年11月08日 数砖的 Xingbo Jiang 大佬给社区发了一封邮件,宣布 Apache Spark 3.0 预览版正式发布,这个版本主要是为了对即将发布的 Apache Spark 3. ...

  2. iOS蓝牙--CoreBluetooth基本使用

    蓝牙使用步骤: 1. 扫描外设 2. 连接外设 3. 连上外设后,获取指定外设的服务 4. 获取服务后,遍历服务的特征,得到可读,可写等特征,然后与中心管理者进行数据交互 附上代码 一:导入框架 #i ...

  3. GitHub和Git

    GitHub托管项目代码 首先一些基本概念: repository(仓库) 用来存放项目代码,每个项目代表一个仓库,开一个项目就意味着你有一个仓库. star(收藏) 收藏方便下次查找. fork(复 ...

  4. [SD卡] FPGA笔记之SD卡

    1.数据怎么存进去的? 其中的sd_miso就是接收的1位数据,n个时钟下就收到n个数据,比如n=21. 2.如何做到先发送高位?

  5. lqb 基础练习 杨辉三角形

    基础练习 杨辉三角形 时间限制:1.0s   内存限制:256.0MB     问题描述 杨辉三角形又称Pascal三角形,它的第i+1行是(a+b)i的展开式的系数. 它的一个重要性质是:三角形中的 ...

  6. Java开发者入职必备条件

    01．基础技术体系 我认为知识技能体系化是判断技术是否过关的第一步.知识体系化包含两层含义: 1. 能够知道技术知识图谱(高清版图谱扫文末二维码)的内容 比如分布式系统中常用的RPC技术,其背后就涉及 ...

  7. [学习笔记] 在Windows 10上安装 WebLogic 12.2.1.3

    本文适用于学习目的而撰写.截止目前WebLogic已经有12.2.1.4.0了. 在安装WebLogic 12.2.1.3.0 首先要在Windows10之上Oracle JDK 1.8.  当前认证 ...

  8. react-router重定向

    ① ②通过this.props重定向

  9. c# 发送邮箱，企业邮箱测试成功

    今天在项目中需要实现一个发送邮箱的功能,来实现用户邮箱激活功能!!! 之前采用的是个人的邮箱进行测试,一切都是很顺利的,后来换成了公司的企业邮箱,遇到了一点小问题,问题如下: 发送邮件失败,原因:命令 ...

  10. 理解Redis单线程运行模式

    本文首发于:https://mp.weixin.qq.com/s/je4nqCIq6ARhSV2V5Ymmtg 微信公众号:后端技术指南针 0.概述 通过本文将了解到以下内容: Redis服务器采用单 ...