首先来瞄一下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. Leetcode算法【114. 二叉树展开为链表】

    上周通过一位小伙伴,加入了一个氛围很好的小群,人不多,但是大家保持着对知识的渴望,让我很感动. 我自己也有一个群,人数也不多,但是能真正互动起来一起学习,一起进步的,还是太少.所以,现在也在学习如何让 ...

  2. JenKins结合cppcheck及cpplint进行代码风格及静态代码检测

    JenKins结合cppcheck及cpplint 最近公司需要在Jenkins上安装cppcheck及cpplint进行代码风格及静态代码检测,这里记录下过程. 前提条件 安装了Jenkins 步骤 ...

  3. ffmpeg 编译安装

    1.FFmpeg编译 1.1.安装yasm 这里我是直接通过ubuntu包安装的,当然也可以通过编译源码来安装. sudo apt-get install yasm 1.2.下载FFmpeg git ...

  4. pat 1035 Password（20 分）

    1035 Password(20 分) To prepare for PAT, the judge sometimes has to generate random passwords for the ...

  5. Centos上通过shell脚本备份数据库

    #!/bin/bash ds=`` list=`date +%Y`/`date +%m` dname="callme" eval "mkdir -p $list" ...

  6. selenium中延时等待三种方式

    selenium中的延时等待方式有三种:强制等待:sleep()  隐示等待:implicitly_wait()  显示等待 WebDriverWait() 1.强制等待:sleep(),time模块 ...

  7. 扛把子组final week 1/1 Scrum立会报告+燃尽图 01

    此作业的要求参见http://edu.cnblogs.com/campus/nenu/2019fall/homework/10065 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩 ...

  8. odoo12 修行基础篇之 添加明细字段 （二）

    前一篇介绍了如何在视图和表单中添加字段.本节内容,我们讨论下如何在明细中加字段. 我想在销售页面明细中增加税额字段,这在表sale.order.line中已经存在,在此仅用来演示. odoo的明细一般 ...

  9. day01_爬虫和数据

    1.什么是爬虫 1.1.爬虫的定义   脚本,程序--->自动抓取万维网上信息的程序. 1.2.爬虫的分类 ​ 2.1.通用爬虫 ​ 通用网络爬虫 是 捜索引擎抓取系统(Baidu.Google ...

  10. mybatis源码学习(三)-一级缓存二级缓存

    本文主要是个人学习mybatis缓存的学习笔记,主要有以下几个知识点 1.一级缓存配置信息 2.一级缓存源码学习笔记 3.二级缓存配置信息 4.二级缓存源码 5.一级缓存.二级缓存总结 1.一级缓存配 ...