您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何使用CSS制作Web頁面條紋背景樣式,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
一、橫向條紋
如下代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
background: linear-gradient(#fb3 20%, #58a 80%)
上面代碼表示整個圖片的上部分20%和下部分20%是對應(yīng)的純色,只有中間的部分是漸變色。如果讓中間的部分逐漸縮小,當(dāng)中間部分變?yōu)?即上下兩種顏色的七點和終點相同是,就沒有了漸變而變成了兩種顏色的色條:
CSS Code復(fù)制內(nèi)容到剪貼板
background: linear-gradient(#fb3 50%, #58a 50%);
接下來可以通過設(shè)置背景的大小,讓背景高度變小并且背景默認(rèn)為repeat,從而出現(xiàn)條紋狀
CSS Code復(fù)制內(nèi)容到剪貼板
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
我們可以不設(shè)定第二個顏色的起始位置,設(shè)置為0,則瀏覽器默認(rèn)為接著上一個顏色開始:
CSS Code復(fù)制內(nèi)容到剪貼板
background: linear-gradient(#fb3 30%, #58a 0);
background-size:100% 30px;
這樣就形成了一個黃色占30%藍色占70%的條紋狀背景
也可以設(shè)置多種顏色,下面設(shè)置了三種顏色的條紋:
CSS Code復(fù)制內(nèi)容到剪貼板
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);
background-size: 100% 45px;
二、豎向條紋
只需要在linear-gradient方法中加一個前綴即可。注意還需顛倒background-size長寬的設(shè)定
CSS Code復(fù)制內(nèi)容到剪貼板
background: linear-gradient(to rightright, #fb3 50%, #58a 0);
background-size:30px 100%;
三、斜向條紋
可以通過修改background-size的值以及為linear-gradient添加角度來實現(xiàn)斜向的條紋:
background: linear-gradient(45deg, #fb3 50%, #58a 0); //讓背景的漸變帶有傾斜
background-size:30px 30px; //每一塊小組成部分固定寬度和高度
但這樣做的結(jié)果是只會形成一小塊一小塊的斜線,而不是整體div的斜線,我們需要以四個小div為一組繪制斜線,添加linear-gradient中的顏色分解:
CSS Code復(fù)制內(nèi)容到剪貼板
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);
background-size:30px 30px;
四、使用repeat-linear-gradient
對于斜線的背景繪制,使用repeat-linear-gradient方法更有效。使用該方法的時候,設(shè)置的顏色變化會自動進行重復(fù)直到鋪滿整個div。實例代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
通過這種方式可以任意更改角度,而不會出現(xiàn)上中方法中的調(diào)節(jié)困難
background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);
(這種方法其實相當(dāng)于將size的控制和gradient的控制合到了一起)
五、關(guān)于顏色的設(shè)定
有時我們希望條紋背景的顏色之間是相近的顏色,但是如果手動設(shè)定這個顏色的#很不方便,也很難發(fā)現(xiàn)要選擇什么樣的顏色??梢允褂萌缦路椒ǎ?/p>
CSS Code復(fù)制內(nèi)容到剪貼板
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1)15px,
transparent 0,transparent 30px);
這種方法的原理是:指定背景中最深的顏色,條文中其他相近色用透明度進行調(diào)整
六、綜合實例
這里效果圖一起放上來了,與下面的樣式一一對應(yīng):
CSS Code復(fù)制內(nèi)容到剪貼板
.stripes {
height: 250px;
width: 375px;
float: left;
margin: 10px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* 控制條紋的大小 */
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
}
CSS Code復(fù)制內(nèi)容到剪貼板
.horizontal {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
CSS Code復(fù)制內(nèi)容到剪貼板
.vertical {
background-color: #f90;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
CSS Code復(fù)制內(nèi)容到剪貼板
.picnic {
background-color:white;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}
CSS Code復(fù)制內(nèi)容到剪貼板
.picnic {
background-color:white;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}
CSS Code復(fù)制內(nèi)容到剪貼板
.angled-135 {
background-color: #c16;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}
CSS Code復(fù)制內(nèi)容到剪貼板
.checkered {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(-45deg, transparent 75%, #555 75%);
}
HTML代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="horizontal stripes"></div>
<div class="vertical stripes"></div>
<div class="picnic stripes"></div>
<div class="angled stripes"></div>
<div class="angled-135 stripes"></div>
<div class="checkered stripes"></div>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何使用CSS制作Web頁面條紋背景樣式”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。