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

CSS3條紋背景制作的實(shí)戰(zhàn)攻略

雨打浮萍   發(fā)布時(shí)間：2016-05-31 11:40:22   作者：lyhydfp   我要評論
這篇文章主要介紹了CSS3條紋背景制作的實(shí)戰(zhàn)攻略,根據(jù)Forefox瀏覽器和webkit內(nèi)核的瀏覽器兩種情況來分別講解,需要的朋友可以參考下

mozilla內(nèi)核瀏覽器制作background背景漸變

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

-mozilla內(nèi)核的瀏覽器css樣式：

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

以火狐為代表，顯示效果如下：
2016531114556815.jpg (411×106)

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

2、改變條紋的方向

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

在上面的樣式中添加了一組參數(shù)<角度位置>，參數(shù)分別為0deg-360deg，當(dāng)這為0deg時(shí)，為豎條紋，度數(shù)增加時(shí)，以逆時(shí)針方向轉(zhuǎn)動。下圖為它分別為0deg和45deg時(shí)效果圖：
2016531114631103.jpg (319×120)

2016531114649581.jpg (301×120)

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

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

大家看到，在原來的代碼里面我添加了一種透明顏色（transparent 25%），這種漸變的位置和前面一種漸變的位置相重合，它發(fā)生了什么樣的事情？
2016531114715279.jpg (264×113)

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

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

猜猜看，效果圖會是什么樣子的？
2016531114803691.jpg (278×111)

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

4、斜紋背景的雛形

現(xiàn)在大家再把原來的0deg，改成45deg，會變成什么樣子的呢？
2016531114835228.jpg (308×151)

大家應(yīng)該可以看出來這已經(jīng)是斜紋背景了吧。再修改一下：

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

大家看到了什么，有沒有得到令你滿意的效果，修改顏色值，來達(dá)到你的目的。這里面還有一個(gè)問題，大家自己思考下吧，background-size的值需要注意什么？
2016531114906725.jpg (307×138)

5、最終效果

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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-size: 16px 16px;   
  5. }  

webkit內(nèi)核
 1、制作一個(gè)簡單的豎條紋背景

css如下， 這里的效果圖可以與上面火狐版的對應(yīng)起來看

CSS Code復(fù)制內(nèi)容到剪貼板

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

 2、改變條紋的方向，

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

 3、添加豐富的顏色漸變

CSS Code復(fù)制內(nèi)容到剪貼板
  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、調(diào)整顏色，并添加透明色。


復(fù)制代碼
代碼如下:
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步來調(diào)整方向


復(fù)制代碼
代碼如下:
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、調(diào)整顏色，調(diào)整background-size大小

CSS Code復(fù)制內(nèi)容到剪貼板
  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-size: 16px 16px;   
  4. }  

2016531115330310.jpg (600×300)

7、調(diào)整顏色值的透明度，最終效果如下：

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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-size: 16px 16px;   
  6. }  

上面的代碼加上了上面講的mozilla內(nèi)核瀏覽器下的寫法，在火狐、谷歌瀏覽器中測試顯示正常。
2016531115224102.jpg (346×180)

相關(guān)文章

  • CSS3制作酷炫的條紋背景

    這篇文章主要介紹了CSS3制作酷炫的條紋背景的相關(guān)資料,需要的朋友可以參考下
    2017-11-09

最新評論