成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

神奇的background——繪制圖形

tainzhi / 3354人閱讀

摘要：還可能有需要切一整張超大圖的情況。作為一個(gè)優(yōu)秀的前端，本著自己動(dòng)手豐衣足食的理念，下面給大家介紹用來(lái)繪制這些特的圖片。原理其實(shí)就是通過(guò)繪制每個(gè)圖形設(shè)置位置和大小，最后就能得到想要圖像。

相信大家在平時(shí)工作中少不了會(huì)被要求在某些元添加一些特殊的背景圖片，這時(shí)候通常就拿起ps就是切切切。不說(shuō)這種方式麻煩，有ui給你切好的情況已經(jīng)不錯(cuò)，沒(méi)有的就有自己動(dòng)手。還可能有需要切一整張超大圖的情況。作為一個(gè)“優(yōu)秀”的前端，本著自己動(dòng)手豐衣足食的理念，下面給大家介紹用background來(lái)繪制這些特的圖片。

先來(lái)看看平時(shí)會(huì)出現(xiàn)的

遇上這種情況，通常處理就是切得下面的圖片

再通過(guò)一下css得到

當(dāng)然現(xiàn)在不切圖，直接用css來(lái)做

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
                linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;
    background-size: 100px 100px;
    background-color: #fff;
}

我們可以看到會(huì)得到與切圖一模一樣的效果

接下來(lái)來(lái)看下上面的css為什么這樣寫(xiě)
首先我們先理解background: linear-gradient()，在background中CSS3 漸變（gradients）可看做一張背景圖片，可理解為background: url()，而背景圖片的可以為多張的，對(duì)應(yīng)我們就可以寫(xiě)多個(gè)linear-gradient，通過(guò)對(duì)其顏色的控制來(lái)拼接成一個(gè)獨(dú)立的圖片塊。background-size刷新中可通過(guò)逗號(hào)分隔，會(huì)循環(huán)設(shè)置對(duì)應(yīng)的linear-gradient。
這里需要注意的是，linear-gradient是重后往前繪制的，就是說(shuō)前面顏色的會(huì)覆蓋后面的顏色。

分析上面的格子背景，我看可以看做在一個(gè)4x4的格子中有兩個(gè)1x1的灰格子覆蓋在上面。每個(gè)灰格子可通過(guò)
的基礎(chǔ)圖案拼成，所以有了如下

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px;

這里有個(gè)問(wèn)題，小三角間拼接有縫隙，所以用
圖形再拼接一次。

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;

最后我們就能得到和上面一樣的格子背景。
更多例子

有時(shí)候我們需要的背景可能不需要repeat，且圖形沒(méi)有規(guī)律
如：

這時(shí)我們就要對(duì)圖形的每個(gè)角進(jìn)行分別設(shè)置。

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(black, black) left top,
                linear-gradient(black, black) left top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) left bottom,
                linear-gradient(black, black) left bottom;
    background-repeat: no-repeat;
    background-size: 4px 20px, 20px 4px;

原理其實(shí)就是通過(guò)linear-gradient繪制每個(gè)圖形設(shè)置位置和大小，最后就能得到想要圖像。

以后當(dāng)我們遇上一些特殊的背景圖后就能通過(guò)css來(lái)實(shí)現(xiàn)它呢。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/53055.html

相關(guān)文章

  • 神奇的background——繪制圖形

    摘要：還可能有需要切一整張超大圖的情況。作為一個(gè)優(yōu)秀的前端，本著自己動(dòng)手豐衣足食的理念，下面給大家介紹用來(lái)繪制這些特的圖片。原理其實(shí)就是通過(guò)繪制每個(gè)圖形設(shè)置位置和大小，最后就能得到想要圖像。 相信大家在平時(shí)工作中少不了會(huì)被要求在某些元添加一些特殊的背景圖片，這時(shí)候通常就拿起ps就是切切切。不說(shuō)這種方式麻煩，有ui給你切好的情況已經(jīng)不錯(cuò)，沒(méi)有的就有自己動(dòng)手。還可能有需要切一整張超大圖的情況。作...

    jollywing 評(píng)論0 收藏0

  • 學(xué)習(xí) canvas 的 globalCompositeOperation 做出的神奇效果

    摘要：主要的不同是，刮刮卡效果最后需要自動(dòng)擦除掉全部灰色，這里有兩種方式。第二種方式，雖然不存在跨域的問(wèn)題，但是，不能很好的根據(jù)刮刮卡上灰色的面積，控制最后擦除全部灰色的時(shí)機(jī)。 說(shuō)明 最早知道 canvas 的 globalCompositeOperation 屬性，是在需要實(shí)現(xiàn)一個(gè)刮刮卡效果的時(shí)候，當(dāng)時(shí)也就是網(wǎng)上找到刮刮卡的效果趕緊完成任務(wù)就完了，這次又學(xué)習(xí)一次，希望能加深理解吧。 先來(lái)看...

    UnixAgain 評(píng)論0 收藏0

  • 頁(yè)面動(dòng)畫(huà)知識(shí)點(diǎn)整理

    摘要：然后在節(jié)點(diǎn)上設(shè)置了動(dòng)畫(huà)屬性，并將其設(shè)為前面定義的動(dòng)畫(huà)，每一次動(dòng)畫(huà)秒，表示無(wú)限循環(huán)，表示緩動(dòng)方式，兩個(gè)關(guān)鍵幀之間的變化是方式逐步變化的。 平時(shí)工作中會(huì)遇到需要實(shí)現(xiàn)一些存在動(dòng)畫(huà)的頁(yè)面。這里對(duì)動(dòng)畫(huà)的實(shí)現(xiàn)知識(shí)做一個(gè)整理。頁(yè)面動(dòng)畫(huà)的實(shí)現(xiàn)可以分為兩類：CSS動(dòng)畫(huà)、Canvas動(dòng)畫(huà)、JavaScript動(dòng)畫(huà)。JavaScript動(dòng)畫(huà)沒(méi)啥好講的，這里就不整理了。 CSS動(dòng)畫(huà) CSS3中提供了一個(gè)屬性t...

    booster 評(píng)論0 收藏0

  • 用 CSS 實(shí)現(xiàn)三角形與平行四邊形

    摘要：所以我們需要加一個(gè)內(nèi)層元素，并對(duì)內(nèi)層元素做一次逆向的歪曲，從而得到我們想要的效果實(shí)現(xiàn)代碼如下，另附示例上?？偨Y(jié)第一種方法使用屬性出三角形，并通過(guò)對(duì)三個(gè)元素進(jìn)行拼接最終實(shí)現(xiàn)了平行四邊形而第二種方法則通過(guò)來(lái)得到平行四邊形。 本文最初發(fā)布于我的個(gè)人博客：咀嚼之味 最近在逛某個(gè)技術(shù)網(wǎng)站的時(shí)候，感覺(jué)文章關(guān)鍵詞上的樣式好酷炫啊。于是我將那種寫(xiě)法照搬到了我的博客中，也許最近逛過(guò)我博客的小伙伴已經(jīng)發(fā)現(xiàn)...

    Martin91 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<