整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
通常我們在寫input時，它的背景文字框都是灰色的，樣式很單一，其實它可以做的更好看的，在CSS3中就專門提供了一屬性placeholder來實現輸入框的美化。接下來，就為大家展示下：
HTML：
CSS：
效果：
對于input輸入框的背景提示信息(placeholder)的美化雖然只是對網站應用的小小點綴，但正是這樣細節上的小差別將你的網站和別人的網站區別開來。IE10也支持了placeholder屬性哦！
切版 qieban(.cn)
23 年的 CSS 新特性中，有一個非常重要的功能更新 -- 相對顏色。
簡單而言，相對顏色的功能，讓我們在 CSS 中，對顏色有了更為強大的掌控能力。
其核心功能就是，讓我們能夠基于一個現有顏色 A，通過一定的轉換規則，快速生成我們想要的顏色 B。
其功能能夠涵蓋：
當然，今天我們不會一個一個去過這些功能，更多的時候，我們只需要知道我們能夠實現這些功能。
本文，我們將從實際實用角度出發，基于實際的案例，看看 CSS 相對顏色，能夠如何解決我們的一些實際問題。
首先，我們通過一張圖，一個案例，快速入門 CSS 相對顏色語法：
相對顏色語法的目標是允許從另一種顏色派生顏色。
上圖顯示了將原始顏色 green 轉換為新顏色的顏色空間后，該顏色會轉換為以 r、g、b 和 alpha 變量表示的各個數字，這些數字隨后會直接用作新的 rgb() 顏色的值。
舉個例子：
<p> CSS Relative Color </p>
p {
color: rgb(255, 0, 0);
}實現一個 color 為紅色（rgb 值為 rgb(255, 0, 0)）的字體：
基于上面的相對顏色語法，我如何通過一個紅色生成綠色文字呢？示意如下：
p {
--color: rgb(255, 0, 0);
color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */
}
效果如下，我們就得到綠色字體：
解釋一下：
通過這個 DEMO，我們把幾個核心基礎語法點學習一下：
from 關鍵字，它是相對顏色的核心。它表示會將 from 關鍵字后的顏色定義轉換為相對顏色！在 from 關鍵字后面，CSS 會期待一種顏色，即能夠啟發生成另一種顏色。
第二個關鍵點，from 后面通常會接一個顏色值，這個顏色值可以是任意顏色表示法，或者是一個 CSS 變量，下面的寫法都是合法的：
p {
color: rgba(from #ff0000) r g b);
color: rgb(from rgb(255, 0, 0) r g b);
color: rgb(from hsl(0deg, 100%, 50%) r g b);
color: rgb(from var(--hotpink) r g b);
}
另外一個非常重要的基礎概念就是，我們可以對 (from color r g b) 后的轉換變量 r g b 使用 calc() 或其他 CSS 函數。
就是我們上面的例子：
p {
--color: rgb(255, 0, 0);
color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */
}
相對顏色的基礎的使用規則就是這樣，它不僅支持 rgb 顏色表示法，它支持所有的顏色表示法：
通常頁面上的按鈕，都會有 hover/active 的顏色變化，以增強與用戶的交互。
像是這樣：
最常見的寫法，就是我們需要在 Normal 狀態、Hover 狀態、Active 狀態下寫 3 種顏色：
p {
color: #ffcc00;
transition: .3s all;
}
/* Hover 偽類下為 B 顏色 */
p:hover {
color: #ffd21f;
}
/** Active 偽類下為 C 顏色 **/
p:active {
color: #ab8a05;
}
在之前，我們介紹過一種利用濾鏡 filter: contrast() 或者 filter: brightness() 的統一解決方案，無需寫多個顏色值，可以根據 Normal 狀態下的色值，通過濾鏡統一實現更亮、或者更暗的偽類顏色。
在今天，我們也可以利用 CSS 相對顏色來做這個事情：
div {
--bg: #fc0;
background: var(--bg);
transition: .3s all;
}
div:hover {
background: hsl(from var(--bg) h s calc(l * 1.2));
}
div:active {
background: hsl(from var(--bg) h s calc(l * 0.8));
}
我們通過 hsl 色相、飽和度、亮度顏色表示法表示顏色。實現：
在實際業務中，這是一個非常有用的用法。
相對顏色，還有一個非常有意思的場景 -- 讓文字顏色能夠自適應背景顏色進行展示。
有這么一種場景，有的時候，無法確定文案的背景顏色的最終表現值（因為背景顏色的值可能是后臺配置，通過接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現（譬如當底色為黑色時文字應該是白色，當背景為白色時，文字應該為黑色）。
像是這樣：
在不確定背景顏色的情況下，無論什么情況，文字顏色都能夠適配背景的顏色。
在之前，純 CSS 沒有特別好的方案，可以利用 mix-blend-mode: difference 進行一定程度的適配：
div {
// 不確定的背景色
}
p {
color: #fff;
mix-blend-mode: difference;
}
實操過這個方案的同學都會知道，在一定情況下，前景文字顏色還是會有一點瑕疵。并且，混合模式這個方案最大的問題是會影響清晰度。
有了 CSS 相對顏色后，我們有了更多的純 CSS 方案。
我們可以利用相對顏色的能力，基于背景色顏色進行反轉，賦值給 color。
一種方法是將顏色轉換為 RGB，然后從 1 中減去每個通道的值。
代碼非常簡單：
p {
/** 任意背景色 **/
--bg: #ffcc00;
background: var(--bg);
color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b)); /** 基于背景反轉顏色 **/
}
用 1 去減，而不是用 255 去，是因為此刻，會將 rgb() 表示法中的 0~255 映射到 0~1。
效果如下：
配個動圖，我們利用背景色的反色當 Color 顏色，適配所有背景情況：
完整的 DEMO 和代碼，你可以戳這里：CodePen Demo -- CSS Relatvie Color Adapt BG
當然，這個方案還有兩個問題：
為了解決這兩個問題，CSS 顏色規范在 CSS Color Module Level 6 又推出了一個新的規范 -- color-contrast()。
color-contrast() 函數標記接收一個 color 值，并將其與其他的 color 值比較，從列表中選擇最高對比度的顏色。
利用這個 CSS 顏色函數，可以完美的解決上述的問題。
我們只需要提供 #fff 白色和 #000 黑色兩種可選顏色，將這兩種顏色和提供的背景色進行比較，系統會自動選取對比度更高的顏色。
改造一下，上面的代碼，它就變成了：
p {
/** 任意背景色 **/
--bg: #ffcc00;
background: var(--bg);
color: color-contrast(var(--bg) vs #fff, #000); /** 基于背景色，自動選擇對比度更高的顏色 **/
}
這樣，上面的 DEMO 最終效果就變成了：
此方案的優勢在于：
當然，唯一限制這個方案的最大問題在于，當前，color-contrast 還只是一個實驗室功能，未大規模被兼容。
到今天，我們可以利用 CSS 提供的各類顏色函數，對顏色有了更為強大的掌控力。
很多交互效果，不借助 JavaScript 的運算，也能計算出我們想要的最終顏色值。本文簡單的借助：
兩個案例，介紹了 CSS 相對顏色的功能。
原文鏈接：https://juejin.cn/post/7321410822789742618
天小胖在coding的時候，遇到一個問題，就是要使用一個動態的文本作為div的背景，想著使用絕對定位堆疊來實現，或者偽元素實現，終歸不夠優雅，直到看到張鑫旭大佬的這篇文章，只能說，很當優雅！
在實際開發中，有時候希望文字內容可以作為背景圖片顯示，一方面是希望利用背景圖片的優勢，例如可以平鋪，另外一方面是常見的替換元素不能使用偽元素創建文字，此時只能寄希望與背景圖。
關鍵如何把文字變成背景圖呢？
通常CSS開發人員的做法是把文字導出來轉換成圖片，然后作為背景圖顯示，但是這樣成本有些高，也不利于日后的維護。
這里給大家介紹一種實用的技術，可以讓文字作為CSS背景圖片。
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代碼，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"。
這里拋磚引玉，舉幾個使用文字作為背景圖的例子。
例如為防止截圖，會給頁面，或者聊天軟件背景等增加文字水印。
以前幾乎都是通過生成一個專門的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");
}截圖效果如下所示：
常規的占位符都是在輸入框的左上方，或者右上方，如果我們希望提示的占位符在右下角，則就可以使用這里的文本圖像技術實現。
比方說下面這個多行文本域輸入框，當你輸入內容，右下角的提示內容就會消失，沒有內容的時候就又會顯示（實時效果，可以親自體驗下）。
相關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%。
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，推薦大家經常刷刷他的博客，他的書也不錯，大家也可以買來讀一讀！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
