利用css中background實(shí)現(xiàn)繪制圖形的方法

這篇文章將為大家詳細(xì)講解有關(guān)利用css中background實(shí)現(xiàn)繪制圖形的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

十年的禮縣網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整禮縣建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“禮縣網(wǎng)站設(shè)計(jì)”,“禮縣網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

相信大家在平時(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得到

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

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

當(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è)置位置和大小，最后就能得到想要圖像。

關(guān)于利用css中background實(shí)現(xiàn)繪制圖形的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享名稱：利用css中background實(shí)現(xiàn)繪制圖形的方法
分享地址：http://muchs.cn/article30/pphipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、用戶體驗(yàn)、微信公眾號(hào)、搜索引擎優(yōu)化、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)