整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          干貨:HTML中“input”背景提示文字美化

          通常我們?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

          其功能能夠涵蓋:

          • 精簡(jiǎn)
          • 調(diào)暗
          • 飽和度
          • 降低飽和度
          • 色度增強(qiáng)
          • 調(diào)整不透明度
          • 反轉(zhuǎn)
          • 補(bǔ)充
          • 轉(zhuǎn)換
          • 對(duì)比度
          • 調(diào)色板

          當(dāng)然,今天我們不會(huì)一個(gè)一個(gè)去過(guò)這些功能,更多的時(shí)候,我們只需要知道我們能夠?qū)崿F(xiàn)這些功能。

          本文,我們將從實(shí)際實(shí)用角度出發(fā),基于實(shí)際的案例,看看 CSS 相對(duì)顏色,能夠如何解決我們的一些實(shí)際問(wèn)題。

          快速語(yǔ)法入門(mé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) */
          }
          

          效果如下,我們就得到綠色字體:

          解釋一下:

          1. 原本的紅色顏色,我們把它設(shè)置為 CSS 變量 --color: rgb(255, 0, 0)
          2. 想通過(guò)紅色得到綠色,對(duì)于紅色的 rgb 值 rgb(255, 0, 0) 而言,需要轉(zhuǎn)換成 rgb(0, 255, 0)
          3. 使用 CSS 相對(duì)顏色語(yǔ)法,就是 rgb(from var(--color) calc(r - 255) calc(g + 255) b)

          通過(guò)這個(gè) DEMO,我們把幾個(gè)核心基礎(chǔ)語(yǔ)法點(diǎn)學(xué)習(xí)一下:

          1. from 關(guān)鍵字

          from 關(guān)鍵字,它是相對(duì)顏色的核心。它表示會(huì)將 from 關(guān)鍵字后的顏色定義轉(zhuǎn)換為相對(duì)顏色!在 from 關(guān)鍵字后面,CSS 會(huì)期待一種顏色,即能夠啟發(fā)生成另一種顏色

          1. from 關(guān)鍵字 后的顏色表示,支持不同顏色表示或者是 CSS 變量

          第二個(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);
          }
          
          1. 對(duì)轉(zhuǎn)換后的變量使用 calc() 或其他 CSS 函數(shù)

          另外一個(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) */
          }
          
          1. 相對(duì)顏色語(yǔ)法支持,各種顏色表示函數(shù):

          相對(duì)顏色的基礎(chǔ)的使用規(guī)則就是這樣,它不僅支持 rgb 顏色表示法,它支持所有的顏色表示法:

          • sRGB 顏色空間:hsl()、hwb()、rgb();
          • CIELAB 顏色空間:lab()、lch();
          • Oklab 顏色空間:oklab()、oklch();

          使用 CSS 相對(duì)顏色,實(shí)現(xiàn)統(tǒng)一按鈕點(diǎn)擊背景切換

          通常頁(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):

          1. 在 :hover 狀態(tài)下,根據(jù)背景色,將背景亮度 l 調(diào)整為原背景色的 1.2 倍
          2. 在 :avtive 狀態(tài)下,根據(jù)背景色,將背景亮度 l 調(diào)整為原背景色的 0.8 倍

          在實(shí)際業(yè)務(wù)中,這是一個(gè)非常有用的用法。

          使用 CSS 相對(duì)顏色,實(shí)現(xiàn)文字顏色自適應(yīng)背景

          相對(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 方案。

          利用 CSS 相對(duì)顏色,反轉(zhuǎn)顏色

          我們可以利用相對(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)題:

          1. 如果顏色恰好是在 #808080 灰色附近,它的反色,其實(shí)還是它自己!會(huì)導(dǎo)致在灰色背景下,前景文字不可見(jiàn);
          2. 絕大部分情況雖然可以正常展示,但是并不是非常美觀好看

          為了解決這兩個(gè)問(wèn)題,CSS 顏色規(guī)范在 CSS Color Module Level 6 又推出了一個(gè)新的規(guī)范 -- color-contrast()

          利用 color-contrast(),選擇高對(duì)比度顏色

          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ì)在于:

          1. 可以限定前景 color 顏色為固定的幾個(gè)色值,以保證 UI 層面的統(tǒng)一及美觀
          2. 滿足任何情況下的背景色

          當(dāng)然,唯一限制這個(gè)方案的最大問(wèn)題在于,當(dāng)前,color-contrast 還只是一個(gè)實(shí)驗(yàn)室功能,未大規(guī)模被兼容。

          總結(jié)一下

          到今天,我們可以利用 CSS 提供的各類顏色函數(shù),對(duì)顏色有了更為強(qiáng)大的掌控力。

          很多交互效果,不借助 JavaScript 的運(yùn)算,也能計(jì)算出我們想要的最終顏色值。本文簡(jiǎn)單的借助:

          1. 使用 CSS 相對(duì)顏色,實(shí)現(xiàn)統(tǒng)一按鈕點(diǎn)擊背景切換
          2. 使用 CSS 相對(duì)顏色,實(shí)現(xiàn)文字顏色自適應(yīng)背景

          兩個(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本質(zhì)上就是一個(gè)圖像

          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文字背景圖的工具。

          二、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"

          三、文字背景圖應(yīng)用案例

          這里拋磚引玉,舉幾個(gè)使用文字作為背景圖的例子。

          1. 水印

          例如為防止截圖,會(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");
          }

          截圖效果如下所示:

          2. 輸入框其他位置的占位符提示效果

          常規(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%

          3. 視頻無(wú)法播放提示

          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)絕佳老少皆宜。

          四、總結(jié)一下

          如果想讓文字內(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)讀一讀!


          主站蜘蛛池模板: 国产一区二区精品在线观看| 国产福利电影一区二区三区,日韩伦理电影在线福 | 一区二区在线视频免费观看| 人妻AV一区二区三区精品| 精品亚洲AV无码一区二区三区| 国产成人久久一区二区不卡三区| 日韩精品一区二区三区毛片| 亚洲国产精品第一区二区三区| 亚洲午夜福利AV一区二区无码| 亚洲高清日韩精品第一区| 亚洲av无码一区二区三区在线播放| 亚洲国产欧美一区二区三区| 好爽毛片一区二区三区四| 乱色精品无码一区二区国产盗| 日本精品夜色视频一区二区| 久久精品道一区二区三区| 日韩一区二区三区视频久久| 亚洲码一区二区三区| 亚洲AV无码一区二区三区DV| 在线视频一区二区日韩国产| 蜜桃臀无码内射一区二区三区| 亚洲av区一区二区三| 夜夜高潮夜夜爽夜夜爱爱一区| 亚洲日韩国产精品第一页一区| 无遮挡免费一区二区三区| 精品久久久中文字幕一区| 人妻激情偷乱视频一区二区三区| 一区视频在线播放| 精品一区二区三区影院在线午夜 | 中文字幕日韩欧美一区二区三区 | 国产一区二区三区久久| 亚洲国产一区二区视频网站| 日本人的色道www免费一区| 国内精自品线一区91| 久久精品日韩一区国产二区 | 北岛玲在线一区二区| 国产一区二区三区免费在线观看| 日本精品3d动漫一区二区| 精品国产一区二区二三区在线观看| 中文字幕av一区| 国精产品一区一区三区MBA下载|