• 巔云智能建站平臺搭建版(創業門戶版)火爆上線,終身授權!新增:文章智能采集+全站真靜態打包+城市分站+智能小程序+非法詞過濾+H5自適應+智能鏈詞等功能功能詳情
    建站專提News

    CSS3條紋背景制作的實戰攻略

    一佰互聯網站開發設計(www.karaokedaily.com) 發布日期 2019-04-21 17:23:37 瀏覽數: 171

    mozilla內核瀏覽器制作background背景漸變

    1、制作一個簡單的橫條紋漸變背景

    -mozilla內核的瀏覽器css樣式:

    CSS Code復制內容到剪貼板
    1. body {   
    2.  background-color#aaa;   
    3.  background-image:-moz-linear-gradient(#000 25%,#fc0 80%);   
    4.  background-size50px 50px;   
    5. }  

    以火狐為代表,顯示效果如下:

    改變background-size的值可以控制背景條紋的高度。上例中-moz-linear-gradient的值分為兩組,開始值和結束值,同時設定的開始值的開始位置和結束值的結束位置,位置相差的部分形成漸變。開始位置之前的部分填充為開始的顏色值,結束值之后的部分填充為結束的顏色值。

    2、改變條紋的方向

    CSS Code復制內容到剪貼板
    1. body {   
    2.  background-image:-moz-linear-gradient(0deg,#000 25%,#fc0 80%);   
    3. }  

    在上面的樣式中添加了一組參數<角度位置>,參數分別為0deg-360deg,當這為0deg時,為豎條紋,度數增加時,以逆時針方向轉動。下圖為它分別為0deg和45deg時效果圖:

    3、我們嘗試著多加幾種顏色漸變

    CSS Code復制內容到剪貼板
    1. body {   
    2.  background-image:-moz-linear-gradient(45deg,#000 25%,transparent 25%,#fc0 80%);   
    3. }  

    大家看到,在原來的代碼里面我添加了一種透明顏色(transparent 25%),這種漸變的位置和前面一種漸變的位置相重合,它發生了什么樣的事情?

    從上圖中大家可以清晰的看到,第一種顏色嘎然而止。那我們再試著多添加幾種這樣的顏色,會出現什么樣的效果?寫到這里我打算把里面的角度先調成0deg,這樣看起來會更清楚。

    CSS Code復制內容到剪貼板
    1. body {   
    2.  background-image:-moz-linear-gradient(0deg,#000 25%,transparent 25%,transparent 50%,#fc0 50%,#f00 75%,transparent 75%);   
    3. }  

    猜猜看,效果圖會是什么樣子的?

    在這里大家一定要注意一個問題,這里面寫了background-size:50px,50px;那么,它可以被分成重復的塊,每個塊是50px*50px,注意每個塊的起始位置和結束位置。

    4、斜紋背景的雛形

    現在大家再把原來的0deg,改成45deg,會變成什么樣子的呢?

    大家應該可以看出來這已經是斜紋背景了吧。再修改一下:

    CSS Code復制內容到剪貼板
    1. body {   
    2.     background-image:-moz-linear-gradient(45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%);   
    3.     background-size:16px 16px;   
    4. }  

    大家看到了什么,有沒有得到令你滿意的效果,修改顏色值,來達到你的目的。這里面還有一個問題,大家自己思考下吧,background-size的值需要注意什么?

    5、最終效果

    雖然上面的斜紋背景已經出來了,但還沒有達到我們想要的最終效果。我們再把里面的顏色值修改一下,換成白色?,F在的顏色值為#fff,我們把它換成rgba形式為rgba(255,255,255,1),前面的三個數字為rgb,第四個數字為alpha,現在我們把這個alpha改成半透明的,代碼如下:

    CSS Code復制內容到剪貼板
    1. body {   
    2.     background-color#eee;   
    3.     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);   
    4.     background-size16px 16px;   
    5. }  

    webkit內核
     1、制作一個簡單的豎條紋背景

    css如下, 這里的效果圖可以與上面火狐版的對應起來看

    CSS Code復制內容到剪貼板

    1. body {   
    2.     background-color#eee;   
    3.     background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(#000));   
    4.     background-size80px 80px;   
    5. }  

     2、改變條紋的方向,

    CSS Code復制內容到剪貼板
    1. body {   
    2.     background-image:-webkit-gradient(linear,0 100%,100% 0,from(#fff),to(#000));   
    3. }  

     3、添加豐富的顏色漸變

    CSS Code復制內容到剪貼板
    1. body {   
    2.     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))   
    3. }  

     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復制內容到剪貼板
    1. body {   
    2.     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));   
    3.     background-size16px 16px;   
    4. }  

    7、調整顏色值的透明度,最終效果如下:

    雖然上面的斜紋背景已經出來了,但還沒有達到我們想要的最終效果。我們再把里面的顏色值修改一下,換成白色?,F在的顏色值為#fff,我們再把它換成rgba形式為rgba(255,255,255,1),前面的三個數字為rgb,第四個數字為alpha,現在我們把這個alpha改成半透明的,最終代碼如下:

    CSS Code復制內容到剪貼板
    1. body {   
    2.     background-color#eee;   
    3.     background-image: -moz-linear-gradient(45deg,#fff 25%, transparent 25%, transparent 50%,#fff 50%,#fff 75%, transparent 75%, transparent);   
    4.     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));   
    5.     background-size16px 16px;   
    6. }  

    上面的代碼加上了上面講的mozilla內核瀏覽器下的寫法,在火狐、谷歌瀏覽器中測試顯示正常。

    一佰互聯是全國知名建站品牌服務商,我們有九年網站建設、網站制作、網頁設計、php開發和域名注冊及虛擬主機服務經驗,提供的自助建站服務更是全國有名。近年來還整合團隊優勢自主開發了可視化多用戶”巔云建站系統“3.0平臺版,拖拽排版網站制作設計,輕松實現pc站、手機微網站、小程序、APP一體化全網營銷網站建設 ,已成功的為全國上百家網絡公司提供自助建站平臺搭建服務。更多資訊:tags標簽

    相關新聞more

    25
    12月
    高端網站建設中多語種網站優化解決方案

    172019-06 高端網站建設中多語種網站優化解決方案 隨著外貿行業不斷發展,發布多語種網站內容也... >>詳情

    07
    04月
    24歲月薪2W,好的機會,離不開這個技能…

    設計稿總覺得哪里怪怪的,但是不知道怎么改?設計缺乏完整的體系支撐,每次設計效果差強人意?已經很努力地在工作了,但是薪資沒漲,跳槽無門?被類似... >>詳情

    19
    04月
    建網站創業 是選擇團隊還是個人奮斗

    網絡讓我們能夠本來需要集體一起的工作變成獨立工作。也讓我們不用再被地理環境約束,讓我們可以在家辦公。這些讓我們受益的東西,也讓我們變得越來越... >>詳情

    20
    04月
    html5使用canvas畫空心圓與實心圓

    這里給大家分享的是一個學習canvas的時候做的畫空心圓與實心圓的練習題,非常簡單。<canvas id="canvas&q... >>詳情

    高端網站建設

    美工兼顧SEO,為企業電子商務營銷助力!

    電話(微售):

    18581389571
    建站

    產品

    域名注冊 虛擬主機 云服務器 企業郵局
    智能建站 APP打包 微站/小程序 創業平臺
    網站推廣 媒體營銷 智能采集 AI機器人
    400電話 短信營銷 店銷機器人
    私人定制 門戶網站
    溝通客服
    展開
    91小仙女思妍丝袜,免费中文字幕无码视频,黑色丝袜老师自慰喷水动态图