溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“CSS3條紋背景制作”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS3條紋背景制作”吧!
mozilla內核瀏覽器制作background背景漸變
1、制作一個簡單的橫條紋漸變背景
-mozilla內核的瀏覽器css樣式：
CSS Code復制內容到剪貼板
body {
background-color: #aaa;
background-image:-moz-linear-gradient(#000 25%,#fc0 80%);
background-size: 50px 50px;
}
以火狐為代表，顯示效果如下：
改變background-size的值可以控制背景條紋的高度。上例中-moz-linear-gradient的值分為兩組，開始值和結束值，同時設定的開始值的開始位置和結束值的結束位置，位置相差的部分形成漸變。開始位置之前的部分填充為開始的顏色值，結束值之后的部分填充為結束的顏色值。
2、改變條紋的方向
CSS Code復制內容到剪貼板
body {
background-image:-moz-linear-gradient(0deg,#000 25%,#fc0 80%);
}
在上面的樣式中添加了一組參數<角度位置>，參數分別為0deg-360deg，當這為0deg時，為豎條紋，度數增加時，以逆時針方向轉動。下圖為它分別為0deg和45deg時效果圖：
3、我們嘗試著多加幾種顏色漸變
CSS Code復制內容到剪貼板
body {
background-image:-moz-linear-gradient(45deg,#000 25%,transparent 25%,#fc0 80%);
}
大家看到，在原來的代碼里面我添加了一種透明顏色（transparent 25%），這種漸變的位置和前面一種漸變的位置相重合，它發生了什么樣的事情？
從上圖中大家可以清晰的看到，第一種顏色嘎然而止。那我們再試著多添加幾種這樣的顏色，會出現什么樣的效果？寫到這里我打算把里面的角度先調成0deg，這樣看起來會更清楚。
CSS Code復制內容到剪貼板
body {
background-image:-moz-linear-gradient(0deg,#000 25%,transparent 25%,transparent 50%,#fc0 50%,#f00 75%,transparent 75%);
}
猜猜看，效果圖會是什么樣子的？
在這里大家一定要注意一個問題，這里面寫了background-size：50px,50px;那么，它可以被分成重復的塊，每個塊是50px*50px，注意每個塊的起始位置和結束位置。
4、斜紋背景的雛形
現在大家再把原來的0deg，改成45deg，會變成什么樣子的呢？
大家應該可以看出來這已經是斜紋背景了吧。再修改一下：
CSS Code復制內容到剪貼板
body {
background-image:-moz-linear-gradient(45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%);
background-size:16px 16px;
}
大家看到了什么，有沒有得到令你滿意的效果，修改顏色值，來達到你的目的。這里面還有一個問題，大家自己思考下吧，background-size的值需要注意什么？
5、最終效果
雖然上面的斜紋背景已經出來了，但還沒有達到我們想要的最終效果。我們再把里面的顏色值修改一下，換成白色。現在的顏色值為#fff，我們把它換成rgba形式為rgba(255,255,255,1)，前面的三個數字為rgb，第四個數字為alpha，現在我們把這個alpha改成半透明的，代碼如下：
CSS Code復制內容到剪貼板
body {
background-color: #eee;
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 16px 16px;
}
webkit內核
1、制作一個簡單的豎條紋背景
css如下， 這里的效果圖可以與上面火狐版的對應起來看
CSS Code復制內容到剪貼板
body {
background-color: #eee;
background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(#000));
background-size: 80px 80px;
}
2、改變條紋的方向，
CSS Code復制內容到剪貼板
body {
background-image:-webkit-gradient(linear,0 100%,100% 0,from(#fff),to(#000));
}
3、添加豐富的顏色漸變
CSS Code復制內容到剪貼板
body {
background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(#000),color-stop(25%,#fc0),color-stop(50%,#0fc),color-stop(75%,#f0c))
}
4、調整顏色，并添加透明色。
代碼如下:
background-image:-webkit-gradient(linear,0 0,100% 0,color-stop(25%,#0fc),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#fc0),color-stop(75%,#f0c),color-stop(75%,transparent));
5、按第2步來調整方向
代碼如下:
background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,#0fc),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#fc0),color-stop(75%,#f0c),color-stop(75%,transparent));
6、調整顏色，調整background-size大小
CSS Code復制內容到剪貼板
body {
background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,#000),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#000),color-stop(75%,#000),color-stop(75%,transparent));
background-size: 16px 16px;
}
7、調整顏色值的透明度，最終效果如下：
雖然上面的斜紋背景已經出來了，但還沒有達到我們想要的最終效果。我們再把里面的顏色值修改一下，換成白色。現在的顏色值為#fff，我們再把它換成rgba形式為rgba(255,255,255,1)，前面的三個數字為rgb，第四個數字為alpha，現在我們把這個alpha改成半透明的，最終代碼如下：
CSS Code復制內容到剪貼板
body {
background-color: #eee;
background-image: -moz-linear-gradient(45deg,#fff 25%, transparent 25%, transparent 50%,#fff 50%,#fff 75%, transparent 75%, transparent);
background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.2)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.2)),color-stop(75%,rgba(255,255,255,0.2)),color-stop(75%,transparent));
background-size: 16px 16px;
}
到此，相信大家對“CSS3條紋背景制作”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
