css文字顏色漸變的實現(xiàn)方式有哪些

這篇文章主要為大家展示了“css文字顏色漸變的實現(xiàn)方式有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css文字顏色漸變的實現(xiàn)方式有哪些”這篇文章吧。

創(chuàng)新互聯(lián)公司服務項目包括惠農(nóng)網(wǎng)站建設、惠農(nóng)網(wǎng)站制作、惠農(nóng)網(wǎng)頁制作以及惠農(nóng)網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，惠農(nóng)網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到惠農(nóng)省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

基礎樣式：

.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,00,0bottom,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;

}

<svgviewBoxs="00500300"class="svgBox">

<defs>

<linearGradientid="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>

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

</svg>

說明：

在SVG中，有兩種主要的漸變類型：

線性漸變（linearGradient）

放射性漸變（radialGradient）

SVG中的漸變不僅可以用于填充圖形元素，還可以填充文本元素

dom示例:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

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

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

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

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

<styletype="text/css">

*{margin:0;padding:0;}

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

.wrapper{width:80%;margin:0auto;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,00,0bottom,from(yellow),to(rgba(0,0,255,0)));

}

.gradient-text-three{

fill:url(#SVGID_1_);

font-size:40px;

font-weight:bolder;

}

</style>

</head>

<body>

<sectionclass="wrapper">

<pclass="panelpanel-info">

<pclass="panel-heading">

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

</p>

<pclass="panel-body">

<h4class="gradient-textgradient-text-one">花樣年華</h4>

</p>

<pclass="panelpanel-warning">

<pclass="panel-heading">

<h4class="panel-title">方法2.mask-image</h4>

</p>

<pclass="panel-body">

<h4class="gradient-textgradient-text-two"data-content="豆蔻年華">豆蔻年華</h4>

</p>

<pclass="panelpanel-danger">

<pclass="panel-heading">

<h4class="panel-title">方法3.svglinearGradient</h4>

</p>

<pclass="panel-body">

<svgviewBoxs="00500300"class="svgBox">

<defs>

<linearGradientid="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>

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

</svg>

</p>

</section>

</body>

</html>

css文字顏色漸變的實現(xiàn)方式有哪些

以上是“css文字顏色漸變的實現(xiàn)方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標題：css文字顏色漸變的實現(xiàn)方式有哪些
轉(zhuǎn)載來源：http://muchs.cn/article28/jchccp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、外貿(mào)網(wǎng)站建設、響應式網(wǎng)站、面包屑導航、服務器托管、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容