整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
通常我們?cè)趯?xiě)input時(shí)，它的背景文字框都是灰色的，樣式很單一，其實(shí)它可以做的更好看的，在CSS3中就專門(mén)提供了一屬性placeholder來(lái)實(shí)現(xiàn)輸入框的美化。接下來(lái)，就為大家展示下：
HTML：
CSS：
效果：
對(duì)于input輸入框的背景提示信息(placeholder)的美化雖然只是對(duì)網(wǎng)站應(yīng)用的小小點(diǎn)綴，但正是這樣細(xì)節(jié)上的小差別將你的網(wǎng)站和別人的網(wǎng)站區(qū)別開(kāi)來(lái)。IE10也支持了placeholder屬性哦！
切版 qieban(.cn)
23 年的 CSS 新特性中，有一個(gè)非常重要的功能更新 -- 相對(duì)顏色。
簡(jiǎn)單而言，相對(duì)顏色的功能，讓我們?cè)?CSS 中，對(duì)顏色有了更為強(qiáng)大的掌控能力。
其核心功能就是，讓我們能夠基于一個(gè)現(xiàn)有顏色 A，通過(guò)一定的轉(zhuǎn)換規(guī)則，快速生成我們想要的顏色 B。
其功能能夠涵蓋：
當(dāng)然，今天我們不會(huì)一個(gè)一個(gè)去過(guò)這些功能，更多的時(shí)候，我們只需要知道我們能夠?qū)崿F(xiàn)這些功能。
本文，我們將從實(shí)際實(shí)用角度出發(fā)，基于實(shí)際的案例，看看 CSS 相對(duì)顏色，能夠如何解決我們的一些實(shí)際問(wèn)題。
首先，我們通過(guò)一張圖，一個(gè)案例，快速入門(mén) CSS 相對(duì)顏色語(yǔ)法：
相對(duì)顏色語(yǔ)法的目標(biāo)是允許從另一種顏色派生顏色。
上圖顯示了將原始顏色 green 轉(zhuǎn)換為新顏色的顏色空間后，該顏色會(huì)轉(zhuǎn)換為以 r、g、b 和 alpha 變量表示的各個(gè)數(shù)字，這些數(shù)字隨后會(huì)直接用作新的 rgb() 顏色的值。
舉個(gè)例子：
<p> CSS Relative Color </p>
p {
color: rgb(255, 0, 0);
}實(shí)現(xiàn)一個(gè) color 為紅色（rgb 值為 rgb(255, 0, 0)）的字體：
基于上面的相對(duì)顏色語(yǔ)法，我如何通過(guò)一個(gè)紅色生成綠色文字呢？示意如下：
p {
--color: rgb(255, 0, 0);
color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */
}
效果如下，我們就得到綠色字體：
解釋一下：
通過(guò)這個(gè) DEMO，我們把幾個(gè)核心基礎(chǔ)語(yǔ)法點(diǎn)學(xué)習(xí)一下：
from 關(guān)鍵字，它是相對(duì)顏色的核心。它表示會(huì)將 from 關(guān)鍵字后的顏色定義轉(zhuǎn)換為相對(duì)顏色！在 from 關(guān)鍵字后面，CSS 會(huì)期待一種顏色，即能夠啟發(fā)生成另一種顏色。
第二個(gè)關(guān)鍵點(diǎn)，from 后面通常會(huì)接一個(gè)顏色值，這個(gè)顏色值可以是任意顏色表示法，或者是一個(gè) CSS 變量，下面的寫(xiě)法都是合法的：
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);
}
另外一個(gè)非常重要的基礎(chǔ)概念就是，我們可以對(duì) (from color r g b) 后的轉(zhuǎn)換變量 r g b 使用 calc() 或其他 CSS 函數(shù)。
就是我們上面的例子：
p {
--color: rgb(255, 0, 0);
color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */
}
相對(duì)顏色的基礎(chǔ)的使用規(guī)則就是這樣，它不僅支持 rgb 顏色表示法，它支持所有的顏色表示法：
通常頁(yè)面上的按鈕，都會(huì)有 hover/active 的顏色變化，以增強(qiáng)與用戶的交互。
像是這樣：
最常見(jiàn)的寫(xiě)法，就是我們需要在 Normal 狀態(tài)、Hover 狀態(tài)、Active 狀態(tài)下寫(xiě) 3 種顏色：
p {
color: #ffcc00;
transition: .3s all;
}
/* Hover 偽類下為 B 顏色 */
p:hover {
color: #ffd21f;
}
/** Active 偽類下為 C 顏色 **/
p:active {
color: #ab8a05;
}
在之前，我們介紹過(guò)一種利用濾鏡 filter: contrast() 或者 filter: brightness() 的統(tǒng)一解決方案，無(wú)需寫(xiě)多個(gè)顏色值，可以根據(jù) Normal 狀態(tài)下的色值，通過(guò)濾鏡統(tǒng)一實(shí)現(xiàn)更亮、或者更暗的偽類顏色。
在今天，我們也可以利用 CSS 相對(duì)顏色來(lái)做這個(gè)事情：
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));
}
我們通過(guò) hsl 色相、飽和度、亮度顏色表示法表示顏色。實(shí)現(xiàn)：
在實(shí)際業(yè)務(wù)中，這是一個(gè)非常有用的用法。
相對(duì)顏色，還有一個(gè)非常有意思的場(chǎng)景 -- 讓文字顏色能夠自適應(yīng)背景顏色進(jìn)行展示。
有這么一種場(chǎng)景，有的時(shí)候，無(wú)法確定文案的背景顏色的最終表現(xiàn)值（因?yàn)楸尘邦伾闹悼赡苁呛笈_(tái)配置，通過(guò)接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現(xiàn)（譬如當(dāng)?shù)咨珵楹谏珪r(shí)文字應(yīng)該是白色，當(dāng)背景為白色時(shí)，文字應(yīng)該為黑色）。
像是這樣：
在不確定背景顏色的情況下，無(wú)論什么情況，文字顏色都能夠適配背景的顏色。
在之前，純 CSS 沒(méi)有特別好的方案，可以利用 mix-blend-mode: difference 進(jìn)行一定程度的適配：
div {
// 不確定的背景色
}
p {
color: #fff;
mix-blend-mode: difference;
}
實(shí)操過(guò)這個(gè)方案的同學(xué)都會(huì)知道，在一定情況下，前景文字顏色還是會(huì)有一點(diǎn)瑕疵。并且，混合模式這個(gè)方案最大的問(wèn)題是會(huì)影響清晰度。
有了 CSS 相對(duì)顏色后，我們有了更多的純 CSS 方案。
我們可以利用相對(duì)顏色的能力，基于背景色顏色進(jìn)行反轉(zhuǎn)，賦值給 color。
一種方法是將顏色轉(zhuǎn)換為 RGB，然后從 1 中減去每個(gè)通道的值。
代碼非常簡(jiǎn)單：
p {
/** 任意背景色 **/
--bg: #ffcc00;
background: var(--bg);
color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b)); /** 基于背景反轉(zhuǎn)顏色 **/
}
用 1 去減，而不是用 255 去，是因?yàn)榇丝蹋瑫?huì)將 rgb() 表示法中的 0~255 映射到 0~1。
效果如下：
配個(gè)動(dòng)圖，我們利用背景色的反色當(dāng) Color 顏色，適配所有背景情況：
完整的 DEMO 和代碼，你可以戳這里：CodePen Demo -- CSS Relatvie Color Adapt BG
當(dāng)然，這個(gè)方案還有兩個(gè)問(wèn)題：
為了解決這兩個(gè)問(wèn)題，CSS 顏色規(guī)范在 CSS Color Module Level 6 又推出了一個(gè)新的規(guī)范 -- color-contrast()。
color-contrast() 函數(shù)標(biāo)記接收一個(gè) color 值，并將其與其他的 color 值比較，從列表中選擇最高對(duì)比度的顏色。
利用這個(gè) CSS 顏色函數(shù)，可以完美的解決上述的問(wèn)題。
我們只需要提供 #fff 白色和 #000 黑色兩種可選顏色，將這兩種顏色和提供的背景色進(jìn)行比較，系統(tǒng)會(huì)自動(dòng)選取對(duì)比度更高的顏色。
改造一下，上面的代碼，它就變成了：
p {
/** 任意背景色 **/
--bg: #ffcc00;
background: var(--bg);
color: color-contrast(var(--bg) vs #fff, #000); /** 基于背景色，自動(dòng)選擇對(duì)比度更高的顏色 **/
}
這樣，上面的 DEMO 最終效果就變成了：
此方案的優(yōu)勢(shì)在于：
當(dāng)然，唯一限制這個(gè)方案的最大問(wèn)題在于，當(dāng)前，color-contrast 還只是一個(gè)實(shí)驗(yàn)室功能，未大規(guī)模被兼容。
到今天，我們可以利用 CSS 提供的各類顏色函數(shù)，對(duì)顏色有了更為強(qiáng)大的掌控力。
很多交互效果，不借助 JavaScript 的運(yùn)算，也能計(jì)算出我們想要的最終顏色值。本文簡(jiǎn)單的借助：
兩個(gè)案例，介紹了 CSS 相對(duì)顏色的功能。
原文鏈接：https://juejin.cn/post/7321410822789742618
天小胖在coding的時(shí)候，遇到一個(gè)問(wèn)題，就是要使用一個(gè)動(dòng)態(tài)的文本作為div的背景，想著使用絕對(duì)定位堆疊來(lái)實(shí)現(xiàn)，或者偽元素實(shí)現(xiàn)，終歸不夠優(yōu)雅，直到看到張?chǎng)涡翊罄械倪@篇文章，只能說(shuō)，很當(dāng)優(yōu)雅！
在實(shí)際開(kāi)發(fā)中，有時(shí)候希望文字內(nèi)容可以作為背景圖片顯示，一方面是希望利用背景圖片的優(yōu)勢(shì)，例如可以平鋪，另外一方面是常見(jiàn)的替換元素不能使用偽元素創(chuàng)建文字，此時(shí)只能寄希望與背景圖。
關(guān)鍵如何把文字變成背景圖呢？
通常CSS開(kāi)發(fā)人員的做法是把文字導(dǎo)出來(lái)轉(zhuǎn)換成圖片，然后作為背景圖顯示，但是這樣成本有些高，也不利于日后的維護(hù)。
這里給大家介紹一種實(shí)用的技術(shù)，可以讓文字作為CSS背景圖片。
SVG雖然是XML語(yǔ)言構(gòu)成的，但是本質(zhì)上就是一個(gè)圖像，是可以作為圖像使用的，例如：
<img src="zhangxinxu.svg">此時(shí)的zhangxinxu.svg就是一個(gè)圖像，同樣的，也可以作為背景圖顯示，例如：
.example {
background: url(zhangxinxu.svg);
}但是，這里的SVG文件都是獨(dú)立的SVG文件，和把文字導(dǎo)出成PNG圖片沒(méi)有任何區(qū)別，根本沒(méi)有意義嘛！
對(duì)的，請(qǐng)不用急，是這樣的，SVG作為一個(gè)矢量圖像，和通常的位圖有一點(diǎn)不一樣，那就是SVG圖像可以直接以源代碼的方式內(nèi)聯(lián)在Web頁(yè)面中。
關(guān)于這個(gè)特性，可以參考我之前的這篇文章：“學(xué)習(xí)了，CSS中內(nèi)聯(lián)SVG圖片有比Base64更好的形式 ? 張?chǎng)涡?鑫空間-鑫生活”。
例如下面是一段顯示文本的SVG代碼：
<svg xmlns="http://www.w3.org/2000/svg">
<text>文字內(nèi)容</text>
</svg>是可以直接作為background-image使用的，例如：
.by-zhangxinxu {
background-image: url('<svg xmlns="http://www.w3.org/2000/svg"><text>文字內(nèi)容</text></svg>');
}由于安全性限制，目前需要對(duì)部分字符進(jìn)行轉(zhuǎn)義，因此，實(shí)際的CSS代碼是這樣的：
.exmaple {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext%3E文字內(nèi)容%3C/text%3E%3C/svg%3E");
}相比PNG圖像的文字背景，使用SVG內(nèi)聯(lián)的好處在于，我們可以輕松修改文字的內(nèi)容，同時(shí)我們可以隨意設(shè)置文字的字號(hào)大小，顏色、描邊效果等等。
但是，每次都手寫(xiě)一段SVG代碼好難哦，尤其很多前端小伙伴對(duì)SVG并不是很熟悉。
不要緊，考慮到這種情況存在，我專門(mén)做了一個(gè)生成SVG文字背景圖的工具。
您可以狠狠地點(diǎn)擊這里：文字轉(zhuǎn)SVG圖像在線轉(zhuǎn)換工具 ? 張?chǎng)涡?鑫空間-鑫生活
界面截圖示意如下：
最上面是配置區(qū)域，可以設(shè)置作為背景的文字內(nèi)容，可以設(shè)置文字的顏色、透明度以及位置等信息。
中間是代碼區(qū)，左側(cè)是原始SVG，可以點(diǎn)擊圖標(biāo)下載SVG文件到本地；右側(cè)是轉(zhuǎn)義的可以直接內(nèi)聯(lián)使用的SVG代碼，HTML和CSS中均可內(nèi)聯(lián)使用。
最下面是預(yù)覽區(qū)域。
如果需要其他配置項(xiàng)
實(shí)際開(kāi)發(fā)中的需求是千變?nèi)f化的，工具目前內(nèi)置的配置項(xiàng)不一定能覆蓋所有的場(chǎng)景，此時(shí)可以這么處理，直接修改左側(cè)文本域中的SVG代碼，此時(shí)右側(cè)的轉(zhuǎn)義SVG代碼會(huì)自動(dòng)同步，例如，如果我們希望背景文字帶有旋轉(zhuǎn)效果，這樣可以作為水印圖片使用，則可以在已經(jīng)生成的SVG代碼中的元素上設(shè)置45度旋轉(zhuǎn)相關(guān)的代碼。
一種方法是直接在<svg>元素上設(shè)置傳統(tǒng)DOM元素的CSS style設(shè)置，例如：
另外一種方法就是<text>元素上使用SVG元素自動(dòng)的transform屬性進(jìn)行設(shè)置，但是SVG中的transform變換坐標(biāo)和CSS是很不一樣的，直接<text transform="rotate(-45)">是不會(huì)有預(yù)期的旋轉(zhuǎn)效果的，因?yàn)槟J(rèn)SVG的變換中心點(diǎn)是左上角，因此，設(shè)置transform="rotate(-45)"會(huì)讓文字不可見(jiàn)。
關(guān)于SVG的transform變換坐標(biāo)體系可以參考我之前寫(xiě)的這篇文章：“理解SVG transform坐標(biāo)變換”
<text>元素也能?chē)@中心點(diǎn)變換有2個(gè)方法，一種是使用translate()函數(shù)先偏移、然后再旋轉(zhuǎn)，然后在偏移復(fù)原，這種方法啰嗦了一點(diǎn)，另外一種方法就是使用SVG中rotate()函數(shù)的可選參數(shù)，也就是第2個(gè)參數(shù)，就是可以指定旋轉(zhuǎn)的中心點(diǎn)坐標(biāo)，這個(gè)特性SVG獨(dú)有，Canvas中是沒(méi)有的。
代碼演示如下截圖所示：
其中，可以看到專門(mén)設(shè)置了SVG元素的width寬和height高，因?yàn)槿绻辉O(shè)置，按照目前的CSS background-size的尺寸渲染規(guī)范，SVG的尺寸會(huì)采用容器的尺寸，rotate()函數(shù)的第2個(gè)參數(shù)就需要設(shè)置為容器元素的寬高的一半才能讓文字居中旋轉(zhuǎn)。
更新于 2022-01-25
dominant-baseline="middle" 只是近似垂直居中，如果 SVG 圖片高度較小，會(huì)看到往上偏移了一點(diǎn)距離，此時(shí)可以試試修改為 dominant-baseline="central"。
這里拋磚引玉，舉幾個(gè)使用文字作為背景圖的例子。
例如為防止截圖，會(huì)給頁(yè)面，或者聊天軟件背景等增加文字水印。
以前幾乎都是通過(guò)生成一個(gè)專門(mén)的PNG圖片實(shí)現(xiàn)，現(xiàn)在可以直接代碼內(nèi)聯(lián)，例如點(diǎn)擊下面這個(gè)按鈕，大家就可以看到我這篇文章的實(shí)時(shí)水印效果了。
不要害怕，用力點(diǎn)擊我
相關(guān)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");
}截圖效果如下所示：
常規(guī)的占位符都是在輸入框的左上方，或者右上方，如果我們希望提示的占位符在右下角，則就可以使用這里的文本圖像技術(shù)實(shí)現(xiàn)。
比方說(shuō)下面這個(gè)多行文本域輸入框，當(dāng)你輸入內(nèi)容，右下角的提示內(nèi)容就會(huì)消失，沒(méi)有內(nèi)容的時(shí)候就又會(huì)顯示（實(shí)時(shí)效果，可以親自體驗(yàn)下）。
相關(guān)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富強(qiáng)民主文明和諧美麗%3C/text%3E%3C/svg%3E") no-repeat right 10px bottom 5px;
}
.custom-placeholder:valid {
background: none;
}因?yàn)檫@里的文本是右對(duì)齊，下對(duì)齊，因此，設(shè)置text-anchor屬性值是end，同時(shí)x, y屬性值都是100%或者接近100%。
HTML5 <video>元素中的視頻如果因?yàn)榈刂峰e(cuò)誤等原因無(wú)法播放，是沒(méi)有辦法像普通元素那樣寫(xiě)入一段錯(cuò)誤提示文字，因?yàn)?/span><video>元素是替換元素，寫(xiě)在標(biāo)簽里面的內(nèi)容都會(huì)被忽略。
此時(shí)，可以讓視頻播放出錯(cuò)的時(shí)候以背景圖的形式顯示文字就可以了。
比方說(shuō)下面這個(gè)實(shí)時(shí)例子，就是一個(gè)故意寫(xiě)錯(cuò)了地址的MP4視頻，大家可以看到“視頻無(wú)法預(yù)覽”的白色提示文字，就是使用這篇文章提供的技術(shù)實(shí)現(xiàn)的。
相關(guān)代碼如下所示：
<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視頻無(wú)法預(yù)覽%3C/text%3E%3C/svg%3E") no-repeat center;
}簡(jiǎn)單易懂體驗(yàn)絕佳老少皆宜。
如果想讓文字內(nèi)容直接作為背景圖片顯示，可以使用SVG元素作為中間橋梁實(shí)現(xiàn)。
關(guān)鍵問(wèn)題是SVG元素的獲得不太容易，因此，我就專門(mén)給大家開(kāi)發(fā)了一個(gè)工具，通過(guò)簡(jiǎn)單配置實(shí)現(xiàn)想要的CSS文字背景代碼。
同時(shí)介紹了如果通過(guò)修改左側(cè)輸入框得到自定義的文字背景效果。
最后，介紹了3個(gè)具有代表性的案例，展示了文字作為背景圖片的一些妙用，拋磚引玉，希望可以啟發(fā)大家在實(shí)際開(kāi)發(fā)中的應(yīng)用。
OK，技術(shù)本身并不難，難的是當(dāng)遇到類似場(chǎng)景的時(shí)候可以想到可以直接使用代碼實(shí)現(xiàn)，而不是導(dǎo)出圖片。
好，以上就是本文的全部?jī)?nèi)容，感謝您的閱讀，如果您覺(jué)得本文內(nèi)容還挺有幫助的，歡迎分享。
本文轉(zhuǎn)自張?chǎng)涡翊罄械姆窒恚牡刂罚喝绾巫屛淖肿鳛镃SS背景圖片顯示？ ? 張?chǎng)涡?鑫空間-鑫生活，張大佬經(jīng)常分享一些很不錯(cuò)的css idea，推薦大家經(jīng)常刷刷他的博客，他的書(shū)也不錯(cuò)，大家也可以買(mǎi)來(lái)讀一讀！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
