首页 > Web开发 > 详细

css实现文字渐变

时间:2019-06-20 19:04:58      阅读:111      评论:0      收藏:0      [点我收藏+]

css文件渐变虽然兼容性比较差,但是用在移动端和chrome中还是没有问题的。

实现文件渐变的方法有两种

1. 使用 background 的属性

2. 使用 mask 属性

方式一、

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
    span {
        font-size: 30px;
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
    </style>
</head>

<body>
    <span>Hello world</span>
</body>
</html>

效果如下

技术分享图片

 

代码也是非常简单:

background: liner-gradient(to right, red, blue); 这个就是设置背景色,这是是background-image的简写,不是backround-color

-webkit-background-clip: text; 这个属性在 W3School 上有明确解释

技术分享图片

但是并没有text 属性,所以这个只能在chrome上看到效果,在其他浏览器没有实现,它的兼容性就有很大的问题了

 

方式二、

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<style type="text/css">
    h1{
        position: relative;
        color: yellow;
    }
    h1:before{
        content: attr(data-text);
        position: absolute;
        z-index: 10;
        color:pink;
        -webkit-mask:linear-gradient(to left, red, transparent );
    }
</style>
</style>
</head>

<body>
    <h1 data-text="hello world">hello world</h1>
</body>

效果如下

技术分享图片

 

参考  简单说 CSS中的mask—好好利用mask-image

张鑫旭: 小tip:CSS3下的渐变文字效果实现


 

css实现文字渐变

原文:https://www.cnblogs.com/shenjp/p/11060608.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!