css实现文字颜色渐变的三种方法

最新推荐文章于 2024-09-22 09:02:33 发布
最新推荐文章于 2024-09-22 09:02:33 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： css 文章标签： css3 html
原文链接：https://www.jb51.net/css/647191.html
版权

在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！

基础样式：

1

.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

第一种方法，使用 background-cli、 text-fill-color：

1

2

3

4

5

.gradient-text-one{ 

    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

说明 ：

background: -webkit-linear-gradient(…) 为文本元素提供渐变背景。

webkit-text-fill-color: transparent 使用透明颜色填充文本。

webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

第二种方法，使用 mask-image：

1

2

3

4

5

6

7

8

9

10

11

12

13

.gradient-text-two{

   color:red;

}

.gradient-text-two[data-content]::after{

    content:attr(data-content);

    display: block;

    position:absolute;

    color:yellow;

    left:0;

    top:0;

    z-index:2;

    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));

}

说明：

mask-image 和 background-image 一样，不仅可以取值是 图片路径，也可以是渐变色。

第三种方法，使用 linearGradient、fill：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

.gradient-text-three{

    fill:url(#SVGID_1_);

    font-size:40px;

    font-weight:bolder;

}

 

<svg viewBoxs="0 0 500 300" class="svgBox">

    <defs>

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">

            <stop  offset="0" style="stop-color:yellow"/>

            <stop  offset="0.5" style="stop-color:#fd8403"/>

            <stop  offset="1" style="stop-color:red"/>

        </linearGradient>

    </defs>

    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>

</svg>

说明：

在SVG中，有两种主要的渐变类型
：
 

线性渐变（linearGradient）

放射性渐变（radialGradient）

SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素

dom示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>CSS3渐变字体</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">

        *{margin:0;padding:0;}

        body,html{width:100%;height:100%;}

        .wrapper{width:80%;margin:0 auto;margin-top:30px;}

        .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

        .gradient-text-one{ 

            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);

            -webkit-background-clip:text;

            -webkit-text-fill-color:transparent;

        }

        .gradient-text-two{

            color:red;

        }

        .gradient-text-two[data-content]::after{

            content:attr(data-content);

            display: block;

            position:absolute;

            color:yellow;

            left:0;

            top:0;

            z-index:2;

            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));

        }

        .gradient-text-three{

            fill:url(#SVGID_1_);

            font-size:40px;

            font-weight:bolder;

        }

    </style>

</head>

<body>

    <section class="wrapper">

        <div class="panel panel-info">

            <div class="panel-heading">

                <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>

            </div>

            <div class="panel-body">

                <h3 class="gradient-text gradient-text-one">花样年华</h3>

            </div>

        </div>

        <div class="panel panel-warning">

            <div class="panel-heading">

                <h3 class="panel-title">方法2. mask-image</h3>

            </div>

            <div class="panel-body">

                <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>

            </div>

        </div>

        <div class="panel panel-danger">

             

            <div class="panel-heading">

                <h3 class="panel-title">方法3. svg linearGradient</h3>

            </div>

  

            <div class="panel-body">

                <svg viewBoxs="0 0 500 300" class="svgBox">

                    <defs>

                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">

                            <stop  offset="0" style="stop-color:yellow"/>

                            <stop  offset="0.5" style="stop-color:#fd8403"/>

                            <stop  offset="1" style="stop-color:red"/>

                        </linearGradient>

                    </defs>

                    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>

                </svg>

            </div>

  

        </div>

    </section>

</body>

</html>

效果：
 

无人之岛08
关注
专栏目录
Android高级UI之文字绘制及渐变效果实现
qq_33613491的博客
07-15 637
一、文字如何绘制在中心点 1、通过画笔 Paint 和画布 Canvas 绘制文字并显示； 若直接通过 canvas.drawText() 绘制。将对应 x/y 值都设为 0 ，文字并不会显示，这是因为 y 要传入的值是基于文字基线 baseline,如下图： public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) { super.drawText(text, x, y, paint
安卓开发 实现文字渐变效果_细节提升：用渐变巧妙提升产品质感
weixin_39623805的博客
11-24 379
背景介绍现在的APP界面中，经常图象或者视频上叠加文字和按钮的情况，比如常见的Banner、查看大图、视频播放器、专题等等。而这也是新人容易出错的地方：文字直接放在图片上，当背景色和字色过于接近时，会影响文字的读取阅读。比如下面这样：为了解决这个问题，通常的解决办法是在图片和文字中间叠加一个中间层(蒙层)，如图：这样一来，即便背景色和字色过于接近，由于中间层的存在，也不会影响文字阅读。中间层(即 ...
精通CSS背景渐变：设计与技巧
最新发布
weixin_36149538的博客
09-22 1262
本文还有配套的精品资源，点击获取 简介：CSS背景渐变是网页设计中的一个强大工具，用于增强视觉吸引力并使设计看起来现代和动态。本教程详细介绍了线性渐变和径向渐变的创建方法，包括颜色停止点、渐变方向、形状及中心点的设置。同时，讲解了如何在渐变中应用透明度以及创建重复渐变效果。本教程还涉及了浏览器兼容性问题及前缀使用，并通过实战应用示例，指导如何在实际项目中运用背景渐变技术。 ...
【iOS开发】文字渐变
Hanrovey Blog
11-25 415
轻松设置文字颜色为渐变色
css3实现字体的颜色渐变
csdn_chenli
06-29 1万+
css3实现字体的颜色渐变，记录一下，在些页面时有时会用到。 效果图： html源码： 金玉良缘 css样式 }  .mTitle_main { width: 500px; height: 100px; background:#000000 ;  }        .mTitle_main h2{    width: 500px; height
css 字体颜色渐变
weixin_44042792的博客
01-11 283
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { font-size: 36px; background: linear-gradient(to bottom, #01f6fa, #fcfdfe); ...
android 渐变蒙版_PPT教程 | 渐变蒙版
weixin_32806343的博客
12-29 526
上期，给大家介绍了渐变蒙版，有小伙伴还是不清楚什么是渐变蒙版？如何制作渐变蒙版？正好，这段时间在自由坊平台上，我分享了PPT渐变填充教程。因此，期许今天就给大家做一期渐变蒙版的教程，为大家系统的讲解下PPT中的渐变蒙版。一、什么是渐变蒙版？首先蒙版是PS中的工具，作用是遮挡像素。在PPT中所说的蒙版，其实就是一个半透明的色块。而渐变蒙版就是两组或以上颜色构成的渐变透明色块，可以非常快速地将单调的背...
神奇！js+CSS+DIV实现文字颜色渐变效果
11-23
总的来说，这个实例结合了前端三大技术——HTML、CSS和JavaScript，实现了用户交互式文字颜色渐变。这样的效果不仅可以提升用户体验，也展示了Web开发的灵活性和创造力。开发者可以通过调整CSS样式、优化JavaScript...
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
09-25
3. 为了实现文字从一种颜色渐变到另一种颜色，需要添加一个伪元素，并设置为与原文字相同的内容。 4. 最后使用position属性将原文字和伪元素重叠，伪元素通过text-shadow和颜色属性实现渐变效果。 ### 实际应用和...
android 渐变蒙版_Android实现遮罩层（蒙板）效果
weixin_39518002的博客
12-19 1646
Android的遮罩效果就是把一张图片盖在另一张图片的上面，通过控制任意一张图片的显示百分比实现遮罩效果。下面我使用两张一样的图片来实现一个类似于 Android 的progressbar 的填充效果。使用遮罩效果来实现progressbar的效果的好处是，我们可以只改变图片就可以更改progress的进度填充效果，并且我们可以实现任意形式的填充效果，就比如横竖填充，扇形逆/顺时填充针等。网上有很...
Photoshop教程_PS渐变工具找不到,怎样导入ps渐变样式?ps渐变使用教程
m0_46528371的博客
10-16 1938
PS中的渐变工具是大家比较常用的工具，它用来在整个文档或选区内填充渐变颜色，在PS应用中非常广泛，本文就详细讲解一下ps渐变导入的几种方法，一起来看看吧！ Photoshop教程 ps渐变如何导入 方法一：ps渐变直接导入步骤 这个方法是最简单的。直接双击下载的ps渐变文件，就能载入到phosphate中了，如下图： 开启Photoshop就能见到该ps渐变已载入进去了。如下图： 方法二：ps渐变直接拖拽 将下载的ps渐变文件直接拖到正在运行的Photoshop中：如下图： 开启Photoshop就能
Android开发高手课笔记--如何打造高质量应用？
skytoby
01-22 7784
前言 学习《Android开发高手课》也有一段时间了，确实对技术的提高很有帮助，可以开拓自己的视野。想利用这一段时间好好整理下学习笔记，以便回顾。由于版权问题，后续笔记不再公开，感兴趣可扫二维码参加课程。 如何打造高质量应用 用户体验和应用质量 内存优化，弱网络优化，做高质量的应用远不止这些 1.环境越来越复杂     适配屏幕、双卡双待、Android各种机型厂家系统，国外的语言...
如何打造安卓高质量的应用
qq_39041188的博客
12-08 877
技术更新不断迭代，生态环境不断完善，功能实现逐渐变得简单，进而大家开始追求用户体验和应用质量。除了内存优化、弱网络优化，想做一款高质量的应用还远远不止这些。一方面，我们面对的环境越来越复杂。 Android 那多如繁星的机型、厂家和系统。如果你的应用也要出海，那么还要面对几十个国家不同的语言、环境。另一方面，我们的代码跟业务也越来越复杂了。先不说大量“年久失修”的历史代码，业务越来越复杂，如何管理好几十上百个模块？还要面对 React Native、Flutter、Kotlin等各种语言跟框架堆积在一起的情
CSS3实现字符跳动与颜色渐变
m0_74049496的博客
05-09 362
【代码】CSS3实现字符跳动与颜色渐变。
Android渐变遮罩
一束尘光的技术分享
10-04 1441
这篇文章分享如何在Android中实现渐变遮罩
android 数字选择器中文字颜色透明度渐变的实现
whuthm的专栏
10-11 2295
首先看android View源码中渐变的实现 draw方法 boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0; boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0; 这个需要调用setVerticalFadingE
用css实现文字字体颜色渐变的三种方法
热门推荐
simpleMan8023的博客
11-09 2万+
通过url属性引用SVG图像， SVG是一种用于描述矢量图形的XML标记语言。利用这个属性，我们可以在文字中嵌入SVG图像，实现渐变色效果。background-clip是CSS3中新增的属性，可以用于指定背景图片或颜色的绘制范围。以上三种方法都可以实现文字的颜色渐变。
css实现文本颜色渐变
09-19
CSS中实现文本颜色渐变通常是通过背景图片配合一些特殊技巧，因为`color`属性本身不支持渐变。一种常见的方法是利用伪元素（如`:before`或`:after`）结合`background-clip`属性来达到目的。例如： ```css .my-text { position: relative; /* 添加相对定位使背景可以穿透文字 */ display: inline-block; /* 如果不是行内元素，可能需要这个 */ } .my-text:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, #9DEEFF, #59A8FF); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; color: transparent; } ``` 在这个例子中，`.my-text` 元素的文本内容前面会有一个透明的背景渐变，看起来像是文字的颜色变化。注意，这种方法可能会影响文本的可读性和布局，特别是在字体较小或有行间距的情况下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值