定義一個div：

<div class="shop-title" >上海迪士尼度假區(qū)官方旗艦店</div>

使用css：

.shop-title{
　　width:200px;background: -webkit-linear-gradient(left,#fc0,#f30 50%,#c00 51%,#600);-webkit-background-clip: text;-webkit-text-fill-color: transparent; }

一定要加上div的寬度，否則，背景的漸變色不能顯示出來：

對背景添加線性漸變：background: -webkit-linear-gradient(left,#fc0,#f30 50%,#c00 51%,#600);

對文字進行透明處理：color:transparent(此時會顯示出文字后面的背景顏色)

最后僅僅針對文字應用漸變（注意，此特性"text"僅僅在webkit內核的瀏覽器中得到支持） -webkit-background-clip:text; 此句代碼作用是只有文字能夠顯示出漸變的背景，但是由于文字色是黑色，會將背景顏色覆蓋掉，因此添加了color的transparent屬性，令文字部分透明，從而達到欲達到的效果 2：背景色漸變色： background:-webkit-linear-gradient(top,#0c46a3,#9e09b1);background:-moz-linear-gradient(top,#0c46a3,#9e09b1);background:linear-gradient(top,#0c46a3,#9e09b1);

?

轉載于:https://www.cnblogs.com/xiaozhumaopao/p/6899449.html

總結

以上是生活随笔為你收集整理的css文字和背景色渐变色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。