CSS實現橫紋豎紋斜紋漸變條紋背景的方法上

2016-09-26 09:17

網頁設計

安南子 5615

css發展到今天，關於**背景已經不僅僅侷限於單色的。現在漸變色彩已經很成熟了，我們只要稍微加以利用，那麼就可以實現出不同的效果。《css》揭秘作者就通過**的形式寫出了各式各樣的css背景**，大家可以查閱下。

首先我們需要明白條紋背景是怎麼來的？

回答這個問題，我們來看下漸變背景。如果你理解linear-gradient，那麼上面這個影象就很好繪製出來。這就是最基本的漸變：

background:linear-gradient(#fb3,#58a);

現在我們試試把中間那個灰色部分拉近一點看看效果如何：

background:linear-gradient(#fb3 30%,#58a 70%);

好像是有效果了，那麼我們再拉近點，讓這部分重合吧：

background:linear-gradient(#fb3 50%,#58a 50%);

事實上，我們已經做出了兩個巨大的橫紋，因為我們把過渡部分最小化了，實現了乙個基本上肉眼無法檢視的過渡效果，所以就變成了上圖中的式樣。但現在的問題是我們要的不僅僅是兩條線，我們要條紋的，那麼我們就可以用background-size來實現。

background:linear-gradient(#fb3 50%,#58a 50%);
background-size:100% 15px;

如果要建立超過兩種顏色的條紋，也是很容易的。只要生成三種顏色的水平條紋即可。不過我們需要先明白這樣一句話：

如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小，則該色標的位置值會被設定為它前面所有色標位置值的最大值。

——css影象(第三版)

要明白這句話，我們看這個例子。正常情況下，背景的漸變順序是按從0→100%的順序來寫的，但如果你將中間過渡值(60%)設定少於之前的值(30%)，那麼背景就會在30%的時候不產生漸變，從而形成乙個直接拼合的模式。這就出現了無漸變模式。通常，我們為達到這種效果就會使用數值0帶代替。

正常的漸變模式

background:linear-gradient(#fb3 30%,#58a 60%,#680 90%,);

更改了中間量的模式

background:linear-gradient(#fb3 30%,#58a 0,#680 90%,);

那麼，我們的三條紋模式就可以這樣來實現了：

background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
background-size:100% 60px;

我們會寫了橫的，那麼豎紋背景也很簡單了，只要在linear-gradient上增加乙個引數就可以了。

background:linear-gradient(to right,/* 或90deg */
#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
background-size:25% 60px;

CSS實現橫紋 豎紋 斜紋漸變條紋背景的方法 上