做頁面涉及字體的時候，最多就是換個color換個font-family，總是覺得不夠華麗美豔，這時就需要我們自己動手豐衣足食的去“創造”一些CSS樣式字體呢？

用rgba調整透明度或用opacity調整遮罩

.txt1{ background: pink; color: rgba(0,0,0,0.1); /*或*/ opacity: 0.1; }

兩種區别是用rgba隻是對文字有透明度，而opacity對整個div都有遮罩影響，對比其兩個div的背景顔色即可發現區别。

在css中并沒有指定文字模糊的樣式，但是可以用text-shadow和-webkit-text-fill-color組合，得出模糊文字，即用text-shadow制造底層模糊文字，用-webkit-text-fill-color填充顔色為透明，例如：

.txt2 { text-shadow: 0 0 5px red; -webkit-text-fill-color: transparent; }

這裡的text-shadow将x，y偏移量設置為0，也就是不偏移，設置味5px的模糊程度，重點是下面的fill-color設置為transparent透明，這樣就把底層的模糊字體體現出來，效果如下：

這裡我們用到-webkit-text-stroke來給文字外圍描邊，然後在把文字的填充顔色設置為透明，這樣就能隻顯示出文字的外圍的描邊，也就是我們所說的镂空文字。

.txt3{ -webkit-text-stroke: 1px red; -webkit-text-fill-color: transparent; }

CSS中并沒有給我們提供文字的漸變，但是我們的background可以做到漸變顔色，那怎麼讓文字漸變呢，我們上面的一個屬性是讓文字透明，這樣文字底下的東西我們就可以看的到，那我們試想，如果讓文字下面的漸變背景顔色顯示出來，就是相當于文字有了背景顔色。這裡雖然背景有了漸變，但文字直接成了透明，那麼我們怎麼做到文字外圍的背景去除，文字中的背景顯示出來，我們知道background-clip是用來設置背景圖片在那個區域顯示，如果它能讓文字中的底下顯示，那我們豈不是就能做到我們希望的效果～，沒錯-webkit-background-clip:text的效果就是指定背景隻在文字底下顯示.

.txt4{ background: linear-gradient(to bottom,blue,red); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

我們都知道background-clip是用來設置背景圖片的顯示位置，如果要用到隻在圖片上顯示背景位置，我們在這裡用到了上面說的-webkit-background-clip: text,這個屬性能讓背景隻在文字底下顯示，如果文字設置為透明的，那我們就能透過文字，透過文字看到背景圖片，這是一個能媲美PS效果的利器屬性。

.txt5 { /*背景樣式*/ height: 300px; width: 500px; background-size: contain; background-repeat: no-repeat; background-image: url(img/bg1.jpg); /*文字樣式*/ font-size: 70px; font-weight: bold; text-align: center; line-height: 300px; /*圖片文字樣式*/ -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!