css 背景和漸變

css 背景和漸變

background 背景

全部背景屬性都不能繼承

在CSS2.1裏，background屬性的簡寫方式包含五種屬性值 – background-color, background-image, background-repeat, background-attachment, and background-position

CSS3開始，又增長了3個新的屬性值
注意：反斜槓能夠在支持這種寫法的瀏覽器裏在position後面接着寫background-size

background: [background-color] 
            [background-image] 
            [background-repeat]
            [background-attachment] 
            [background-position] / [ background-size]
            [background-origin] 
            [background-clip];

• background-color 背景色
  不能繼承，其默認值是 transparent

• background-image 背景圖片
  默認值是 none

可設置多幅背景圖片 background-image:url(bg_flower.gif),url(bg_flower_2.gif);

• background-repeat 背景圖片平鋪
  其值可爲 （ repeat | no-repeat | repeat-x | repeat-y ）

默認爲repeat

• background-attachment 背景關聯

  • 若是文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

  • 其值可爲 （ fixed | scroll ）

  • 默認值是 scroll，背景會隨文檔滾動

  • 能夠聲明圖像相對於可視區是固定的（fixed）

• background-position 背景定位

  • 不超過兩個關鍵字，水平方向和垂直方向

  • 只出現一個關鍵字，另外一個認爲是center

  • 其值可爲 （ top，bottom，left，right，center，長度值，百分數值 ）

  • 默認爲 0% 0%，即top left ，元素內邊距區的左上角(padding-box)

• background-size 背景圖像尺寸

  • 默認值auto，寬度和高度，只有一個值，第二個被設置爲auto

  • 其值可爲 （ 長度值，百分數值，cover ，contain ）

    • cover 把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。背景圖像的某些部分也許沒法顯示在背景定位區域中。

    • contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域

• background-origin 定位中心點

  • 注意：若是背景圖像的 background-attachment 屬性爲 "fixed"，則該屬性沒有效果

  • 默認值 padding-box

  • 其值可爲 （ padding-box | border-box | content-box ）

• background-clip 背景的繪製區域

  • 默認值 border-box ，背景被裁剪到邊框盒

  • 其值可爲 （ border-box | padding-box | content-box ）

背景定位

• background-position 擴展語法

  > 容許咱們指定背景圖片`距離任意角的偏移量`,`在偏移量前面指定關鍵字`

  background-position: right 20px bottom 10px;

須要提供一個合適的回退方案,在不支持 background-position 擴展語法的瀏覽器中,背景圖片會緊 貼在左上角(背景圖片的默認位置)

background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

• background-origin

  • 問題：偏移量與容器的內邊距一致

  • 默認狀況下,background-position 是以 padding box 爲準的

  • 若是把background-origin值改爲 content-box,則在 background-position 屬 性中使用的邊角關鍵字將會之內容區的邊緣做爲基準(也就是說,此時背景 圖片距離邊角的偏移量就跟內邊距保持一致了)

  padding: 10px;
  background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */ 
  background-origin: content-box;

• calc()

  background: url("code-pirate.svg") no-repeat; 
  background-position: calc(100% - 20px) calc(100% - 10px);

僞隨機背景

重複平鋪的圖案有必定規律可循，以下面代碼

background: linear-gradient(90deg,
                            #fb3 15%, #655 0, 
                            #655 40%,#ab4 0, 
                            #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;

每80px（即 background-size 的值）重複一次

方法：

• 把平鋪間距最大的貼片安排在最頂層
  仍然能夠看出圖案每隔 240px 就會重複一次,

貼片（多層漸變合成的最終圖案中可感知的重複單元）的尺寸實際上就是全部 background-size 的最小公倍數

background: hsl(20, 40%, 90%);
background-image:
 linear-gradient(90deg, #fb3 10px, transparent 0),
 linear-gradient(90deg, #ab4 20px, transparent 0),
 linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

• 把貼片的尺寸最大化
  「蟬原則」：數字最好是「相對質數」，在這種狀況下，它們的最小公倍數就是它們的乘積

要達成相對質數，最簡單的辦法就是儘可能選擇質數，由於質數跟其餘任意數字都是相對質數

gradient 漸變

• linear-gradient 線性漸變

語法 ： background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標準的語法,必須放最後 */

+ direction/angle 方向或角度
    - direction 使用方向
        + 預約義方向 left,top等
        + 可爲起始方向 (left 從左到右 ) | (left,top 對角)
        + 可定義到達方向 - 使用 to 表示 (to right) | (to right bottom ) 
    - angle 使用角度
        * 角度是指水平線和漸變線之間的角度，逆時針方向計算
        * 0deg 將建立一個從下到上的漸變，90deg 將建立一個從左到右的漸變
        ![角度 對應 方向](http://www.runoob.com/wp-content/uploads/2014/07/7B0CC41A-86DC-4E1B-8A69-A410E6764B91.jpg)
+ 至少定義兩種顏色結點(起點色，停止色)
    - 設置透明度可爲 rgba() 
    - 可指定起止色位置，百分比或長度值 
        + (red 30%,blue 50%) ，則30%-50%間是兩種顏色的漸變，其他部分爲實色
        + 若是某個色標的位置值比整個列表中在它以前的色標的位置值都要小，則該色標的位置值會被設置爲它前面全部色標位置值的最大值

background: linear-gradient(#fb3 33.3%, #58a 0, 
                            #58a 66.6%, yellowgreen 0);

等同於：

background: linear-gradient(#fb3 33.3%, #58a 33.3%, 
                            #58a 66.6%, yellowgreen 66.6%);

• repeating-linear-gradient 重複的線性漸變

  • 適用於斜向條紋

  • 爲這些長度是直接在漸變軸上進行度量的，直接表明了條紋自身的寬度

  • 不論條紋角度如何，在建立雙色條紋時都須要四個色標

    background: linear-gradient(45deg,
                                #fb3 25%, #58a 0, 
                                #58a 50%,#fb3 0, 
                                #fb3 75%, #58a 0);
    background-size: 42.426406871px 42.426406871px;
    
    等同於：
    
    background: repeating-linear-gradient(45deg,
                                          #fb3, #fb3 15px, 
                                          #58a 0, #58a 30px);

  • 同色繫條紋（明亮度有差別）

    主色調和淺色變體組成
    方法是：把最深的顏色指定爲背景色，同時把半透明白色的條紋疊加在背景色之上來獲得淺色條紋
    修改時，只需改動背景色
    
    background: #58a;
    background-image: repeating-linear-gradient(30deg,
    hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,
    transparent 0, transparent 30px);

• radial-gradient 徑向漸變

語法：background: radial-gradient(position, shape size, start-color, ..., last-color);

• repeating-radial-gradient 重複的徑向漸變

  background-image: repeating-radial-gradient(red,green 40px, orange 80px);