首先来瞄一下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. omcat配置多域名站点启动时项目重复加载多次

    在tomcat中配置多个Host的时候, 出现项目重复启动多次的情况. 刚开始以为是spring boot发布项目的时候自带了一个tomcat引起的, 后来发现不是 参考了这两篇文章, 解决问题 ht ...

  2. WordPress 去掉功能中的 wordpress.org

    WordPress 去掉功能中的 wordpress.org  

  3. 【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比

    CSS效果 1.使用div绘制图形(三角形)? <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. 力扣（LeetCode）验证回文串 个人题解（C++）

    给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, a c ...

  5. shell命令管道未读完阻塞了子进程，与等待其结束的父进程死"锁"。

    在exec执行一个子进程,我们希望使用管道取得子进程在重定向后的标准输出上的结果,同时等待子进程的结束.那么是等待子进程结束后才取管道数据,还是边取数据边等待子进程结束呢? 这里有一个调试的例子.u0 ...

  6. 关于手机微信端ios的input不能选中问题解决方案

    最近在做一个微信端的商城,以前做web端的比较多,手机端做的相对来说要少点,老板说让我用俗称”靠谱的移动前端框架”—-AUI来搭建项目. 当时觉得用不用框架无所谓啦.结果后来写到一半把项目发布到手机上 ...

  7. windows系统两个网卡如何同时使用？内网和外网共用，配置教程

    有些企业的网络分为内网和外网,一般内网不能访问Internet,但是又不提供外网,自己有上外网的需求,所以可能会用到双网卡,无线网卡+有线网卡或者有线+有线... 本文就是为了解决此问题,主要的做法就 ...

  8. SpringCloud Alibaba微服务实战 - 基础环境准备

    Springcloud Aibaba现在这么火,我一直想写个基于Springcloud Alibaba一步一步构建微服务架构的系列博客,终于下定决心从今天开始本系列文章的第一篇 - 基础环境准备. 该 ...

  9. 【2018寒假集训 Day2】【动态规划】挖地雷

    挖地雷(Mine) 在一个地图上有N 个地窖(N<=200),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径,并规定路径都是单向的,且从编号小的地窖通向编号大的地窖.某人可以从任一处 ...

  10. The absolute uri: [http://java.sun.com/jsp/jstl/core] cannot be resolved in either web.xml or the jar files deployed with this application] with root cause异常处理及解释

    1.问题描述: 在web的jsp文件中想用jstl这个标准库,在运行的时候很自然的引用jar包如下: <dependency> <groupId>javax.servlet.j ...