给文字加渐变色

Zeropoint零点

于 2018-03-30 11:21:19 发布

阅读量495

点赞数

分类专栏： css 文章标签：给文字加渐变

本文链接：https://blog.youkuaiyun.com/qq_41648132/article/details/79754773

版权

css 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background: #0b182b;
            font-size: 14px/24px;
        }
        .tit{
            width: 100%;
            height: 148px;
        }
        .tit img{
            margin: 0 auto;
            display: block;
        }
        .tit h1{
            color: #fff;
            text-align: center;
            position: relative;
            left: cale(100% / 2 - 12);
            bottom: 96px;
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 255, 255, 1)), to(rgba(139, 227, 242, 1)));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
<div class="tit">
    <img src="images/tit.png" alt="">
    <h1>文字颜色渐变</h1>
</div>
</body>
</html>

最终效果图：