如何利用css的background繪制圖形（附代碼）

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:47:22

如何利用css的background繪制圖形（附代碼）

如何利用css的background繪制圖形（附代碼）:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何利用css的background繪制圖形（附代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。相信大家在平時(shí)工作中少不了會(huì)被要求在某些元添加一些特殊的背景圖片，這時(shí)候通常就拿起ps就是切切切。不說這種

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀如何利用css的background繪制圖形（附代碼）:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何利用css的background繪制圖形（附代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。相信大家在平時(shí)工作中少不了會(huì)被要求在某些元添加一些特殊的背景圖片，這時(shí)候通常就拿起ps就是切切切。不說這種

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何利用css的background繪制圖形（附代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

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

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

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

再通過一下css得到

<div class="box"></div>

<style>
 .box{
 width: 500px;
 height: 500px;
 background: url('imgurl');
 background-size: 20%;
 }
</style>

當(dāng)然現(xiàn)在不切圖，直接用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;
}

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

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

分析上面的格子背景，我看可以看做在一個(gè)4x4的格子中有兩個(gè)1x1的灰格子覆蓋在上面。每個(gè)灰格子可通過

的基礎(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è)問題，小三角間拼接有縫隙，所以用

圖形再拼接一次。

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，且圖形沒有規(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í)就是通過linear-gradient繪制每個(gè)圖形設(shè)置位置和大小，最后就能得到想要圖像。

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com