CSS製作Web頁麵條紋背景樣式的介紹

這篇文章主要介紹了關於CSS製作Web頁麵條紋背景樣式的介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

通過CSS中的linear-gradient主要就能顯示出不同方向的條紋效果,這裡我們就來詳解CSS製作Web頁麵條紋背景樣式的技巧,需要的朋友可以參考下

一、橫向條紋
如下代碼：

background: linear-gradient(#fb3 20%, #58a 80%)

上面代碼錶示整個圖片的上部分20%和下部分20%是對應的純色，只有中間的部分是漸層色。如果讓中間的部分逐漸縮小，當中間部分變為0即上下兩種顏色的七點和終點相同是，就沒有了漸層而變成了兩種顏色的色條:

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

接下來可以通過設定背景的大小，讓背景高度變小並且背景預設為repeat，從而出現條紋狀

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

我們可以不設定第二個顏色的起始位置，設定為0，則瀏覽器預設為接著上一個顏色開始：

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

這樣就形成了一個黃色佔30%藍色佔70%的條紋狀背景
也可以設定多種顏色，下面設定了三種顏色的條紋：

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

二、豎向條紋
只需要在linear-gradient方法中加一個首碼即可。注意還需顛倒background-size長寬的設定

background: linear-gradient(to rightright, #fb3 50%, #58a 0);     background-size:30px 100%;

三、斜向條紋
可以通過修改background-size的值以及為linear-gradient添加角度來實現斜向的條紋：
background: linear-gradient(45deg, #fb3 50%, #58a 0); //讓背景的漸層帶有傾斜
background-size:30px 30px; //每一塊小組成部分固定寬度和高度
但這樣做的結果是只會形成一小塊一小塊的斜線，而不是整體p的斜線，我們需要以四個小p為一組繪製斜線，添加linear-gradient中的顏色分解：

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方法更有效。使用該方法的時候，設定的顏色變化會自動進行重複直到鋪滿整個p。執行個體代碼如下：

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

通過這種方式可以任意更改角度，而不會出現上中方法中的調節困難
background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);
(這種方法其實相當於將size的控制和gradient的控制合到了一起)

五、關於顏色的設定
有時我們希望條紋背景的顏色之間是相近的顏色，但是如果手動設定這個顏色的#很不方便，也很難發現要選擇什麼樣的顏色。可以使用如下方法：

background: #58a;     background-image: repeating-linear-gradient(30deg,     hsla(0,0%,100%,.1),     hsla(0,0%,100%,.1)15px,     transparent 0,transparent 30px);

這種方法的原理是：指定背景中最深的顏色，條文中其他相近色用透明度進行調整

六、綜合執行個體

這裡一起放上來了，與下面的樣式一一對應：

.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;   }

.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);   }

.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);   }

.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));   }

.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));   }

.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);   }

.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代碼：

<p class="horizontal stripes"></p><p class="vertical stripes"></p><p class="picnic stripes"></p><p class="angled stripes"></p><p class="angled-135 stripes"></p><p class="checkered stripes"></p>

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！