今天小胖在coding的時候，遇到一個問題，就是要使用一個動态的文本作為div的背景，想着使用絕對定位堆疊來實作，或者僞元素實作，終歸不夠優雅，直到看到張鑫旭大佬的這篇文章，隻能說，很當優雅！
在實際開發中，有時候希望文字内容可以作為背景圖檔顯示，一方面是希望利用背景圖檔的優勢，例如可以平鋪，另外一方面是常見的替換元素不能使用僞元素建立文字，此時隻能寄希望與背景圖。
關鍵如何把文字變成背景圖呢？
通常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個參數就需要設定為容器元素的寬高的一半才能讓文字居中旋轉。
更新于 2022-01-25
dominant-baseline="middle" 隻是近似垂直居中，如果 SVG 圖檔高度較小，會看到往上偏移了一點距離，此時可以試試修改為 dominant-baseline="central"。
三、文字背景圖應用案例
這裡抛磚引玉，舉幾個使用文字作為背景圖的例子。
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，技術本身并不難，難的是當遇到類似場景的時候可以想到可以直接使用代碼實作，而不是導出圖檔。
好，以上就是本文的全部内容，感謝您的閱讀，如果您覺得本文内容還挺有幫助的，歡迎分享。
本文轉自張鑫旭大佬的分享，原文位址：如何讓文字作為CSS背景圖檔顯示？ � 張鑫旭-鑫空間-鑫生活，張大佬經常分享一些很不錯的css idea，推薦大家經常刷刷他的部落格，他的書也不錯，大家也可以買來讀一讀！