欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解CSS制作Web頁面條紋背景樣式的技巧

CSDN Blog   發(fā)布時間：2016-05-31 11:28:52   作者：fareise   我要評論
通過CSS中的linear-gradient主要就能顯示出不同方向的條紋效果,這里我們就來詳解CSS制作Web頁面條紋背景樣式的技巧,需要的朋友可以參考下

一、橫向條紋
如下代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background: linear-gradient(#fb3 20%, #58a 80%)  

上面代碼表示整個圖片的上部分20%和下部分20%是對應(yīng)的純色，只有中間的部分是漸變色。如果讓中間的部分逐漸縮小，當(dāng)中間部分變?yōu)?即上下兩種顏色的七點和終點相同是，就沒有了漸變而變成了兩種顏色的色條:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background: linear-gradient(#fb3 50%, #58a 50%);  

接下來可以通過設(shè)置背景的大小，讓背景高度變小并且背景默認(rèn)為repeat，從而出現(xiàn)條紋狀

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background: linear-gradient(#fb3 50%, #58a 50%);   
  2. background-size: 100% 30px;  

我們可以不設(shè)定第二個顏色的起始位置，設(shè)置為0，則瀏覽器默認(rèn)為接著上一個顏色開始：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background: linear-gradient(#fb3 30%, #58a 0);   
  2. background-size:100% 30px;  

這樣就形成了一個黃色占30%藍(lán)色占70%的條紋狀背景
也可以設(shè)置多種顏色，下面設(shè)置了三種顏色的條紋：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);   
  2. background-size: 100% 45px;  

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background: linear-gradient(to rightright, #fb3 50%, #58a 0);     
  2. 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)容到剪貼板
  1. background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);     
  2. background-size:30px 30px;    

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. 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)容到剪貼板
  1. background: #58a;     
  2. background-image: repeating-linear-gradient(30deg,     
  3. hsla(0,0%,100%,.1),     
  4. hsla(0,0%,100%,.1)15px,     
  5. transparent 0,transparent 30px);    

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

六、綜合實例
這里效果圖一起放上來了，與下面的樣式一一對應(yīng)：
2016531113058955.png (1190×539)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .stripes {   
  2.     height: 250px;   
  3.     width: 375px;   
  4.     float: left;   
  5.        
  6.     margin: 10px;   
  7.        
  8.     -webkit-background-size: 50px 50px;   
  9.     -moz-background-size: 50px 50px;   
  10.     background-size: 50px 50px; /* 控制條紋的大小 */  
  11.        
  12.     -moz-box-shadow: 1px 1px 8px gray;   
  13.     -webkit-box-shadow: 1px 1px 8px gray;   
  14.     box-shadow: 1px 1px 8px gray;   
  15. }  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .horizontal {   
  2.     background-color: #0ae;   
  3.     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
  4.     background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
  5.     background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
  6.     background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
  7. }  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .vertical {   
  2.     background-color: #f90;   
  3.     background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
  4.     background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
  5.     background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
  6.     background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
  7. }  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .picnic {   
  2.     background-color:white;   
  3.     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))),   
  4.                       -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)));   
  5.     background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
  6.                       -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
  7.     background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
  8.                       -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
  9.     background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
  10.                       linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
  11. }  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .picnic {   
  2.     background-color:white;   
  3.     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))),   
  4.                       -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)));   
  5.     background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
  6.                       -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
  7.     background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
  8.                       -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
  9.     background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
  10.                       linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
  11. }  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .angled-135 {   
  2.     background-color: #c16;   
  3.     background-image: -webkit-gradient(linear, 0 0, 100% 100%,   
  4.                             color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),   
  5.                             color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),   
  6.                             color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),   
  7.                             to(transparent));   
  8.     background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
  9.                         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
  10.                         transparent 75%, transparent);   
  11.     background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
  12.                         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
  13.                         transparent 75%, transparent);   
  14.     background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
  15.                         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
  16.                         transparent 75%, transparent);   
  17. }  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .checkered {   
  2.     background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   
  3.                       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   
  4.                       -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),   
  5.                       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));   
  6.     background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
  7.                       -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
  8.                       -moz-linear-gradient(45deg, transparent 75%, #555 75%),   
  9.                       -moz-linear-gradient(-45deg, transparent 75%, #555 75%);   
  10.     background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
  11.                       -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
  12.                       -o-linear-gradient(45deg, transparent 75%, #555 75%),   
  13.                       -o-linear-gradient(-45deg, transparent 75%, #555 75%);   
  14.     background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
  15.                       linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
  16.                       linear-gradient(45deg, transparent 75%, #555 75%),   
  17.                       linear-gradient(-45deg, transparent 75%, #555 75%);   
  18. }  

HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="horizontal stripes"></div>  
  2. <div class="vertical stripes"></div>  
  3. <div class="picnic stripes"></div>  
  4. <div class="angled stripes"></div>  
  5. <div class="angled-135 stripes"></div>  
  6. <div class="checkered stripes"></div>  

相關(guān)文章

  • 提高CSS代碼效率的編寫技巧

    這篇文章主要為大家詳細(xì)介紹了提高CSS代碼效率的編寫技巧，告訴大家DIV+CSS如何編寫代碼才能更有效率，感興趣的小伙伴們可以參考一下
    2016-06-28

  • 使用CSS的pointer-events屬性實現(xiàn)鼠標(biāo)穿透效果的神奇技巧

    當(dāng)pointer-events的值設(shè)置為none之后,瀏覽器將不會獲得鼠標(biāo)在當(dāng)前位置的層上的點擊事件,而造成鼠標(biāo)穿透的效果!下面就來為大家展開講解一下使用CSS的pointer-events屬性實現(xiàn)
    2016-06-28

  • 20個非常實用的CSS技巧

    這篇文章主要為大家詳細(xì)介紹了20個非常實用的CSS技巧，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-06-08

  • CSS 設(shè)置技巧(單位和值與樣式設(shè)置技巧)

    這篇文章主要介紹了CSS 設(shè)置技巧(單位和值與樣式設(shè)置技巧),需要的朋友可以參考下
    2016-06-07

  • CSS 高級技巧總結(jié)(必看)

    下面小編就為大家?guī)硪黄狢SS 高級技巧總結(jié)(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06

  • 必須掌握10個非常不錯的CSS技巧

    這篇文章主要為大家分享了必須掌握10個非常不錯的CSS技巧，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-06-06

  • CSS制作邊框效果的技巧總結(jié)

    邊框在Web頁面的內(nèi)容塊中非常常用,這里為大家整理了CSS制作邊框效果的技巧總結(jié),尤其是第三種方案的background-origin利用十分討巧,需要的朋友可以參考下
    2016-05-27

  • css布局小技巧分享(必看)

    下面小編就為大家?guī)硪黄猚ss布局小技巧分享(必看)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-24

  • 20 個 CSS 高級技巧匯總(推薦)

    使用技巧會讓人變的越來越懶，沒錯，我就是想讓你變懶。下面是我收集的20條CSS高級技巧，具體內(nèi)容詳情大家參考下本文
    2017-11-30

最新評論