純css3實現條紋背景方法(水平,垂直,傾斜)

2018-09-06CSS10340
  • 詳情內容
  • 留言點評

2016531113058955.png

以上這些并不是背景圖,而是由CSS樣式代碼實現。在現代標準瀏覽器中,我們通過CSS3的兩個屬性,一個是linear-gradient,即線性漸變,另一個是background-size,用來確定漸變的尺寸,就能顯示出不同方向的條紋效果。今天我們就來詳解CSS制作Web頁面條紋背景樣式的技巧,需要的朋友可以參考下。

1、橫向條紋

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

上面代碼表示整個圖片的上部分20%和下部分20%是對應的純色,只有中間的部分是漸變色。如果讓中間的部分逐漸縮小,當中間部分變為0即上下兩種顏色的七點和終點相同是,就沒有了漸變而變成了兩種顏色的色條。接下來可以通過設置背景的大小,讓背景高度變小并且背景默認為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;

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

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

background-size:30px 100%;

3、斜向條紋
可以通過修改background-size的值以及為linear-gradient添加角度來實現斜向的條紋:

background: linear-gradient(45deg, #fb3 50%, #58a 0);(讓背景的漸變帶有傾斜)

background-size:30px 30px;(每一塊小組成部分固定寬度和高度)

但這樣做的結果是只會形成一小塊一小塊的斜線,而不是整體div的斜線,因此我們需要以四個小div為一組繪制斜線,添加linear-gradient中的顏色分解:

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);     

background-size:30px 30px;

4、repeat-linear-gradient方法
對于斜線的背景繪制,使用repeat-linear-gradient方法更有效。使用該方法的時候,設置的顏色變化會自動進行重復直到鋪滿整個div。實例代碼如下:

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

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

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

background: #58a;     

background-image: repeating-linear-gradient(30deg,     

hsla(0,0%,100%,.1),     

hsla(0,0%,100%,.1)15px,     

transparent 0,transparent 30px);

這種方法的原理是:指定背景中最深的顏色,條文中其他相近色用透明度進行調整。目前最新版本的FireFox/Opera/Safari/Chrome瀏覽器以及使用同樣的內核的國產瀏覽器都已能夠支持gradient漸變樣式。實際上CSS漸變與photoshop中的漸變功能是一樣的原理,網頁樣式漸變也可以有無限種可能,以下是一組完整示例:

<body>
    <div class="patterns pt1"></div>
    <div class="patterns pt2"></div>
    <div class="patterns pt3"></div>
</body>
<style>
          .patterns {
            width: 200px;
            height: 200px;
            float: left;
            margin: 10px;
            box-shadow: 0 1px 8px #666;
        }
        .pt1 {
            background-size: 50px 50px;
            background-color: #0ae;
            background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
            background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
        }
        .pt2 {
            background-size: 50px 50px;
            background-color: #0ae;
            background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
            background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
        }
        .pt3 {
            background-size: 50px 50px;
            background-color: #0ae;
            background-image: -webkit-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);

        }
</style>

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金