css文字顏色漸變的3種實現

CSS WebKit · 發表 2018-11-14 21:22:45

摘要：在web前端開發過程中，UI設計師經常會設計一些帶漸變文字的設計圖，在以前我們只能用png的圖片來代替文字，今天可以實現使用純CSS實現漸變文字了。下面就介紹3中實現方式供大家參考！基礎樣式： .gradient-text{text-align: left;text-indent:3...

在web前端開發過程中，UI設計師經常會設計一些帶漸變文字的設計圖，在以前我們只能用png的圖片來代替文字，今天可以實現使用純CSS實現漸變文字了。下面就介紹3中實現方式供大家參考！

基礎樣式：

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

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

.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：

.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：

.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">
<stopoffset="0" style="stop-color:yellow"/>
<stopoffset="0.5" style="stop-color:#fd8403"/>
<stopoffset="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示例:

<!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">
<stopoffset="0" style="stop-color:yellow"/>
<stopoffset="0.5" style="stop-color:#fd8403"/>
<stopoffset="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>

效果：

這裡推薦一下我的前端技術分享群：731771211，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

點選： ofollow,noindex">加入

css文字顏色漸變的3種實現

您可能也會喜歡…