首頁  >  文章  >  web前端  >  css3怎麼實現字體漸層色

css3怎麼實現字體漸層色

青灯夜游
青灯夜游原創
2022-02-28 17:27:1210041瀏覽

方法:用background-clip讓漸變背景色在文字區域顯示,語法“文字元素{background-image:linear-gradient(..);background-clip:text;color:transparent;}” 。

css3怎麼實現字體漸層色

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3字體漸層色

CSS 中並沒有直接的屬性來設定文字漸變,通常文字只能是純色。不過可以透過背景裁切 background-clip讓背景色在文字區域顯示出來,看著就像是文字有了漸變

<p class="text">为你定制 发现精彩</p>
.text{
  background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
  -webkit-background-clip: text;
}

但是這樣沒什麼效果,文字仍然是預設顏色

css3怎麼實現字體漸層色

#原因其實很簡單,由於是裁剪的背景,最後展示的其實是背景顏色,有顏色的文字覆蓋在背景之上,所以這裡需要將文字顏色設置為透明就行了,用color 和 -webkit-text-fill-color都可以實現。

.text{
  background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /*需要文字透明*/
}

這樣就可以看到文字漸變效果了

css3怎麼實現字體漸層色

#核心內容說明:

background-image屬性:設定背景圖片為線性漸層色,了解更多css3漸層內容點這裡

background-clip 屬性:規定背景的繪製區域。 (我們注意到該屬性上的-webkit-,說明該屬性還存在兼容問題,並不是所有瀏覽器都支持,在W3C是沒有text這個值的,這裡的text是背景被裁剪到文字)

css3怎麼實現字體漸層色

color屬性: 設定文字顏色為透明,然後面的背景色顯示出來。

(學習影片分享:css影片教學web前端入門教學

以上是css3怎麼實現字體漸層色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn