作者：張鑫旭
來源：https://www.zhangxinxu.com/wordpress/2020/10/text-as-css-background-image/
在實際開發中，有時候希望文字內容可以作為背景圖片顯示，一方面是希望利用背景圖片的優勢，例如可以平鋪，另外一方面是常見的替換元素不能使用偽元素創建文字，此時只能寄希望與背景圖。
關鍵如何把文字變成背景圖呢？
通常CSS開發人員的做法是把文字導出來轉換成圖片，然後作為背景圖顯示，但是這樣成本有些高，也不利於日後的維護。
這裡給大家介紹一種實用的技術，可以讓文字作為CSS背景圖片。
一、SVG本質上就是一個圖像SVG雖然是XML語言構成的，但是本質上就是一個圖像，是可以作為圖像使用的，例如：
<img src="zhangxinxu.svg">此時的zhangxinxu.svg就是一個圖像，同樣的，也可以作為背景圖顯示，例如：
.example { background: url(zhangxinxu.svg);}但是，這裡的SVG文件都是獨立的SVG文件，和把文字導出成PNG圖片沒有任何區別，根本沒有意義嘛！
對的，請不用急，是這樣的，SVG作為一個矢量圖像，和通常的位圖有一點不一樣，那就是SVG圖像可以直接以原始碼的方式內聯在Web頁面中。
關於這個特性，可以參考我之前的這篇文章：「CSS中內聯SVG圖片有比Base64更好的形式」。
例如下面是一段顯示文本的SVG代碼：
<svg xmlns="http://www.w3.org/2000/svg"> <text>文字內容</text></svg>是可以直接作為background-image使用的，例如：
.by-zhangxinxu { background-image: url('<svg xmlns="http://www.w3.org/2000/svg"><text>文字內容</text></svg>');}由於安全性限制，目前需要對部分字符進行轉義，因此，實際的CSS代碼是這樣的：
.exmaple { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext%3E文字內容%3C/text%3E%3C/svg%3E");}相比PNG圖像的文字背景，使用SVG內聯的好處在於，我們可以輕鬆修改文字的內容，同時我們可以隨意設置文字的字號大小，顏色、描邊效果等等。
但是，每次都手寫一段SVG代碼好難哦，尤其很多前端小夥伴對SVG並不是很熟悉。
不要緊，考慮到這種情況存在，我專門做了一個生成SVG文字背景圖的工具。
二、SVG文字背景圖生成工具您可以狠狠地點擊這裡：文字轉SVG圖像在線轉換工具
界面截圖示意如下：
最上面是配置區域，可以設置作為背景的文字內容，可以設置文字的顏色、透明度以及位置等信息。
中間是代碼區，左側是原始SVG，可以點擊圖標下載SVG文件到本地；右側是轉義的可以直接內聯使用的SVG代碼，HTML和CSS中均可內聯使用。
最下面是預覽區域。
如果需要其他配置項
實際開發中的需求是千變萬化的，工具目前內置的配置項不一定能覆蓋所有的場景，此時可以這麼處理，直接修改左側文本域中的SVG代碼，此時右側的轉義SVG代碼會自動同步，例如，如果我們希望背景文字帶有旋轉效果，這樣可以作為水印圖片使用，則可以在已經生成的SVG代碼中的元素上設置45度旋轉相關的代碼。
一種方法是直接在<svg>元素上設置傳統DOM元素的CSS style設置，例如：
另外一種方法就是<text>元素上使用SVG元素自動的transform屬性進行設置，但是SVG中的transform變換坐標和CSS是很不一樣的，直接<text transform="rotate(-45)">是不會有預期的旋轉效果的，因為默認SVG的變換中心點是左上角，因此，設置transform="rotate(-45)"會讓文字不可見。
關於SVG的transform變換坐標體系可以參考我之前寫的這篇文章：「理解SVG transform坐標變換」
<text>元素也能圍繞中心點變換有2個方法，一種是使用translate()函數先偏移、然後再旋轉，然後在偏移復原，這種方法囉嗦了一點，另外一種方法就是使用SVG中rotate()函數的可選參數，也就是第2個參數，就是可以指定旋轉的中心點坐標，這個特性SVG獨有，Canvas中是沒有的。
代碼演示如下截圖所示：
其中，可以看到專門設置了SVG元素的width寬和height高，因為如果不設置，按照目前的CSS background-size的尺寸渲染規範，SVG的尺寸會採用容器的尺寸，rotate()函數的第2個參數就需要設置為容器元素的寬高的一半才能讓文字居中旋轉。
三、文字背景圖應用案例這裡拋磚引玉，舉幾個使用文字作為背景圖的例子。
1. 水印例如為防止截圖，會給頁面，或者聊天軟體背景等增加文字水印。
以前幾乎都是通過生成一個專門的PNG圖片實現，現在可以直接代碼內聯，例如點擊下面這個按鈕，大家就可以看到我這篇文章的實時水印效果了。
不要害怕，用力點擊我
相關CSS代碼如下所示：
.target { background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.5' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3Ezhangxinxu.com%3C/text%3E%3C/svg%3E");}截圖效果如下所示：
2. 輸入框其他位置的佔位符提示效果常規的佔位符都是在輸入框的左上方，或者右上方，如果我們希望提示的佔位符在右下角，則就可以使用這裡的文本圖像技術實現。
比方說下面這個多行文本域輸入框，當你輸入內容，右下角的提示內容就會消失，沒有內容的時候就又會顯示（實時效果，可以親自體驗下）。
相關HTML和CSS代碼如下所示：
<textarea class="custom-placeholder" required></textarea>.custom-placeholder { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='100%25' y='96%25' font-size='12' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='end'%3E富強民主文明和諧美麗%3C/text%3E%3C/svg%3E") no-repeat right 10px bottom 5px;}.custom-placeholder:valid { background: none;}因為這裡的文本是右對齊，下對齊，因此，設置text-anchor屬性值是end，同時x, y屬性值都是100%或者接近100%。
3. 視頻無法播放提示HTML5 <video>元素中的視頻如果因為地址錯誤等原因無法播放，是沒有辦法像普通元素那樣寫入一段錯誤提示文字，因為<video>元素是替換元素，寫在標籤裡面的內容都會被忽略。
此時，可以讓視頻播放出錯的時候以背景圖的形式顯示文字就可以了。
比方說下面這個實時例子，就是一個故意寫錯了地址的MP4視頻，大家可以看到「視頻無法預覽」的白色提示文字，就是使用這篇文章提供的技術實現的。
相關代碼如下所示：
video src="xxx.png" type="video/mp4" width="360" height="240" onerror="this.classList.add('error')"></video>video.error{ background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23ffffff' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E視頻無法預覽%3C/text%3E%3C/svg%3E") no-repeat center;}簡單易懂體驗絕佳老少皆宜。
四、總結一下如果想讓文字內容直接作為背景圖片顯示，可以使用SVG元素作為中間橋梁實現。
關鍵問題是SVG元素的獲得不太容易，因此，我就專門給大家開發了一個工具，通過簡單配置實現想要的CSS文字背景代碼。
同時介紹了如果通過修改左側輸入框得到自定義的文字背景效果。
最後，介紹了3個具有代表性的案例，展示了文字作為背景圖片的一些妙用，拋磚引玉，希望可以啟發大家在實際開發中的應用。
OK，技術本身並不難，難的是當遇到類似場景的時候可以想到可以直接使用代碼實現，而不是導出圖片。
我們在虛擬的空間與你相遇，期待可以碰撞出不一樣的火花