神奇的background——繪制圖形

jollywing 發布于2019-08-29 16:55 / 2754人閱讀

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

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

先來看看平時會出現的

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

再通過一下css得到

當然現在不切圖，直接用css來做

.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;
}

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

接下來來看下上面的css為什么這樣寫
首先我們先理解background: linear-gradient()，在background中CSS3 漸變（gradients）可看做一張背景圖片，可理解為background: url()，而背景圖片的可以為多張的，對應我們就可以寫多個linear-gradient，通過對其顏色的控制來拼接成一個獨立的圖片塊。background-size刷新中可通過逗號分隔，會循環設置對應的linear-gradient。
這里需要注意的是，linear-gradient是重后往前繪制的，就是說前面顏色的會覆蓋后面的顏色。

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

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;

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

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;

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

有時候我們需要的背景可能不需要repeat，且圖形沒有規律
如：

這時我們就要對圖形的每個角進行分別設置。

.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;

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

以后當我們遇上一些特殊的背景圖后就能通過css來實現它呢。

GPU云服務器云服務器圖形繪制 Android繪制圖形 html繪制圖形代碼 html繪制圖形排列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113988.html

神奇的background——繪制圖形

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

tainzhi 2019-08-02 11:41 評論0 收藏0
學習 canvas 的 globalCompositeOperation 做出的神奇效果

摘要：主要的不同是，刮刮卡效果最后需要自動擦除掉全部灰色，這里有兩種方式。第二種方式，雖然不存在跨域的問題，但是，不能很好的根據刮刮卡上灰色的面積，控制最后擦除全部灰色的時機。說明最早知道 canvas 的 globalCompositeOperation 屬性，是在需要實現一個刮刮卡效果的時候，當時也就是網上找到刮刮卡的效果趕緊完成任務就完了，這次又學習一次，希望能加深理解吧。先來看...

UnixAgain 2019-08-26 17:49 評論0 收藏0
頁面動畫知識點整理

摘要：然后在節點上設置了動畫屬性，并將其設為前面定義的動畫，每一次動畫秒，表示無限循環，表示緩動方式，兩個關鍵幀之間的變化是方式逐步變化的。平時工作中會遇到需要實現一些存在動畫的頁面。這里對動畫的實現知識做一個整理。頁面動畫的實現可以分為兩類：CSS動畫、Canvas動畫、JavaScript動畫。JavaScript動畫沒啥好講的，這里就不整理了。 CSS動畫 CSS3中提供了一個屬性t...

booster 2019-08-19 18:30 評論0 收藏0
用 CSS 實現三角形與平行四邊形

摘要：所以我們需要加一個內層元素，并對內層元素做一次逆向的歪曲，從而得到我們想要的效果實現代碼如下，另附示例上海總結第一種方法使用屬性出三角形，并通過對三個元素進行拼接最終實現了平行四邊形而第二種方法則通過來得到平行四邊形。本文最初發布于我的個人博客：咀嚼之味最近在逛某個技術網站的時候，感覺文章關鍵詞上的樣式好酷炫啊。于是我將那種寫法照搬到了我的博客中，也許最近逛過我博客的小伙伴已經發現...

Martin91 2019-08-28 18:14 評論0 收藏0