css Backgroud-clip (text color gradation)

First to take aim at background-clip, this attribute is doing?

As the name suggests, background clipping ... according to my own understanding is that the background of the display area

Example link here MDN's glue (too much trouble, also labeled the back of my shots) https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip

background-clip There are four property value, the default is border-box

padding-box (background display area not including the border line)

content-box (only the contents of the background display area)

The last attribute value: text, that is, do focus on the text of the gradient, and this effect is similar to PS in the clipping mask, renderings:

Code:

<!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 (text color gradation)

Guess you like