純CSS代碼實現各種條紋背景

家好，今天要跟大家分享的是如何通過純CSS代碼的方法來實現各種條紋背景（如下圖所示）。

通常情況下很多人在網頁中需要條紋背景時，都會使用一些制圖軟件通過制作位圖的方式在網頁中引用，但是日后我們需要修改網頁時就比較麻煩，還要在重復一遍起初的制圖過程重新制作符合需要的位圖，那么如果我們通過純CSS代碼的方法來實現的話，后期網站維護起來就會輕松很多。

知識點：線性漸變linear-gradient()

水平條紋

首先我們看一個最簡單的水平漸變

div{
 width:1000px;
 height:600px;
 background:linear-gradient(#fb3,#58b);
}

在這段代碼中其實存在兩個省略掉的默認樣式：一個是漸變的方向（默認：to bottom)，另一個是顏色漸變起止的位置（默認：黃色從0%的位置向下，藍色從100%的位置向上，在中間50%的地方漸變同時結束融合在一起），所以上面的背景代碼其實是這樣的：

background：linear-gradient(to bottom, #fb3 0%,#fb3 50%, #58b 100%, #58b 50%);

既然顏色漸變的起止位置可以設定，那么我們可以將兩種顏色開始漸變和結束漸變的位置都設在背景50%的中間位置，這樣兩種顏色還沒開始漸變就結束了，其結果如下圖：變成只有兩塊實色，各占一半面積。

background：linear-gradient(to bottom, #fb3 50%,#fb3 50%, #58b 50%, #58b 50%);

可以簡寫為：

background：linear-gradient( #fb3 50%, #58b 50%);

掌握了這個技巧后，我們試著在拓展一下，如果將兩種顏色漸變開始的位置設在30%處會是什么樣子呢？結果如下圖所示：

background：linear-gradient( #fb3 30%, #58b 30%);

我們可以看到這樣做的結果是藍色占據了70%的面積，黃色占據了30%的面積，因此我們可以通過這種方法來創建不等寬的條紋，只需要根據需要調整位置值即可，如下圖：

接著，要想實現示例中的條紋背景效果，只需通過background-size簡單調整一下尺寸就OK了，比如我們添加這樣一段代碼：

background-size:100% 100px;

效果就變成下圖所示的樣子

之所以會變成這個樣子是因為背景在默認情況下是重復平鋪的，如果background設置成no-repeat，它的真實效果是下圖這樣的：

如果要創建超過兩種顏色的條紋，只需要依次設置好漸變的起止位置即可，下面的代碼可以生成三種顏色的水平條紋：

background:

linear-gradient(#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);

background-size:100% 100px;

垂直條紋

理解了水平條紋后，垂直條紋就簡單多了，兩者幾乎一樣，只需將上面的代碼稍微改動兩處即可實現

一個是漸變的方向，改為to right，另一個是background-size的值，將高度設為100%，寬度調為合適的值

background:

linear-gradient(to right,#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);

background-size:100px 100%;

斜向條紋

同樣，根據上面的經驗，我們通過改變相應的參數便可以實現斜向條紋，但是會有些麻煩，比如確定寬度，指定不同的角度等都會帶來相應的問題，不建議采用，這里也不過多贅述，感興趣的同學可以自行去探索。

這里我們采用一種簡單方法來創建，即通過repeating-linear-gradient（）來實現，下面這段代碼便可以生成一個簡單的斜向條紋背景：

background:repeating-linear-gradient（

45deg, #fb3 0,#fb3 50px,#58a 50px,#58a 100px）;

這樣只要確定好角度，然后分別設置每種顏色起始位置和終止位置即可，讓后其會自動填充，如果需要三種顏色在后面繼續添加就可以了，如下所示：

background:repeating-linear-gradient（

45deg, #fb3 0,#fb3 50px,#58a 50px,#58a 100px，red 100px,red 150px）;

今天就介紹到這里，感興趣的同學趕緊試試吧，如果發現本教程存在什么問題或有什么不足還望多多指正。

本文由“國外那點兒事”發布，2017年6月12日

我眼中的中國科學家#

插件預覽

自動背景圖象改變

在一個html代碼

<Script Language="JavaScript"> 　　 image = new Array(4); //定義image為圖片數量的數組　　 image [0] = 'tu0.gif' //背景圖象的路徑　　 image [1] = 'tu1.gif' 　　 image [2] = 'tu2.gif' 　　 image [3] = 'tu3.gif' 　　 image [4] = 'tu4.gif' 　　 number = Math.floor(Math.random() * image.length); 　　 document.write("<BODY BACKGROUND="+image[number]+">"); </Script>

?每日分享前端插件干貨，歡迎關注?

?點贊和分享就是最大的支持?

述：

采用css 實現一個網格，實現網格方式有js，也可以是css，特別是CSS3出現后，用css實現背景網格就非常方便了

源碼：

這里實現了一個web可編輯的樣式，div背景是一個網格，便于在中國區域組件可視化定位使用；

.editor-pane {

height: 100%;

width: 100%;

border: 1px solid #f5f5f5;

border-width: 0 1px;

background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0), linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);

background-position: 0 0, 13px 13px;

background-size: 26px 26px;

display: flex;

justify-content: center;

}

源碼分析：

核心代碼：inear-gradient(angle,side-or-corner,star_color,stop_color,,,)函數

其中，當第一個參數未指定時，其默認值是to bottom。而對于<side-or-corner>，其單位取值可以是和角度有關的deg（角度）、rad（弧度）、grad（梯度）和turn（圈數）
所以，我們要實現一個從上到下，從白漸變到黑的背景，其實只要寫：

顏色位置序列，這些點構成了漸變序列；

位置可以不用寫

位置的理解是：從漸變的起點到這漸變點位置；

相同位置點會構成漸變點的重合導致形成邊界效果；

.t-element {
    background: linear-gradient(to bottom, #FFF 0%, #000 100%);
}

#FFF 0%, #000 100%：顏色為止列表

#FF 顏色值：白色 0% 為位置：就是漸變線0%的位置就開始位置

#000 顏色值：黑色 100% 為位置：就是漸變線100%的位置就開始位置

linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0)

transparent是全透明黑色(black)的速記法，即類似rgba(0,0,0,0)這樣的值

// 表示兩張圖片疊加

background-image:url('res/bgA.jpg'),url('res/bgB.jpg');

這里通過了漸變函數inear-gradient 生成了兩張圖片相互疊加形成了背景方格

所謂漸變容器，便是容納漸變圖案的填充范圍。它可以通過background-size和background-position來指定。如下圖所示：

linear-gradient(45deg, red 25%,transparent 25%,....)

理解：25%, 和25%的位置重疊了，顏色不同然后在邊界形成了分割線

也可以寫成：linear-gradient(45deg, red 25%,transparent 0,....)

由于 0 小于 25%，于是這個地方會繼承：25%；

在線咨詢

上一篇：D3.js實戰教程：14 創建自定義可視化
下一篇：代碼混淆是什么？代碼混淆的方法有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。