简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

CSS製作Web頁面條紋背景樣式的技巧分享

高洛峰
發布： 2017-03-09 17:33:36
原創
1715 人瀏覽過

透過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);
登入後複製

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

六、綜合實例
這裡效果圖一起放上來了，與下面的樣式一一對應：
CSS製作Web頁面條紋背景樣式的技巧分享

.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>
登入後複製

以上是CSS製作Web頁面條紋背景樣式的技巧分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css 条纹背景
來源：php.cn
上一篇：分享CSS3條紋背景製作的實戰教學 下一篇：詳解CSS3實現多重邊框的方法
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
來自於 2024-04-06 20:57:16
0
1
487
CSS 樣式未套用於網站 我正在使用Bootstrap5製作網站，但index.css屬性未應用於index.html。當我將滑鼠懸停在服務卡上時，背景應該會發生變化，從而產生過渡效果。應該是從這個到這個。...
來自於 2024-04-06 17:12:23
0
1
336
推出一款透明瀏覽器，提升Web應用程式與PWA體驗【支援靜態HTML、CSS和JavaScript】【讓使用者在我們的網頁應用程式/PWA中檢視桌面桌布】 我是一個初級前端開發者和設計師，目前正在使用socket開發一個網頁應用程式（聊天）。我和我的朋友使用的語言有：Scala，HTML，CSS，JavaScript。我正在處理HTM...
來自於 2024-04-05 13:50:12
0
1
1367
如何動態變更HTML容器的大小？ 我有一個容器div，它是一個隨視窗動態改變大小的背景。在該容器內，我有一個圖像div，我想使用背景容器更改其大小。即使使用百分比高度和寬度，我似乎也無法動態調整它的大小。誰能指導我...
來自於 2024-04-03 20:38:38
0
1
272
Ag-Grid：是否可以在計時器上設定行的樣式，而不是基於行中的資料？ 我需要在一段時間後更改行的背景顏色。網格中有一列的時間以秒為單位，我需要在該時間過去50%後更改行顏色。網格中的資料本身並沒有改變，因此使用rowClassRules似乎不起作用，...
來自於 2024-04-03 20:14:05
0
1
360
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！