網頁背景

1.設定背景顏色 background-color:#bfa;

設定背景圖片 background-image:url(“./img/.....”)

注意：可以同時設定背景圖片和背景顏色，這樣背景顏色就會變成圖片的背景色

　　如果背景的圖片小於元素，則背景圖片會自動在元素中平鋪將元素鋪滿。

　　如果背景圖片和元素一樣大，則會直接正常顯示。

設定背景的重複方式 background-repeat

　　　　　　　　可選值：repeat:預設值，背景會沿著x軸，y軸雙向重複

　　　　　　　　　　　　repeat-x:沿著

　　　　　　　　　　　　repeat-y:沿著y方向重複

　　　　　　　　　　　　no-repeat:背景圖片不重複

設定背景圖片的位置 background-position

　　　　方式：

　　　　　　（1）通過top,left,right,bittom,center幾個表示方位詞來設定背景，必須指定兩個值，如果只寫一個則第二個預設是center

　　　　　　　　　　background-position:top left;在圖片的左上角

　　　　　　（2）通過偏移量來指定背景圖片的位置，水平方向的偏移量，垂直方向的偏移量

　　　　　　　　　　background-position:100px 100px;水平偏移（

第一個值，水平反向偏移量

正值背景向右移動，負值向左移動

第二個值，垂直方向的偏移量

正值向下走，負值向上走

設定背景範圍：

背景顯示的區域 background-clip

　　可選值：

　　　　border-box 背景會延伸到邊框的下邊

　　　　padding-box 背景會設定到內邊距

　　　　content-box 背景只會設定到內容區中

背景圖片的偏移量計算的原點 background-origin

　　　　　　padding-box:預設值，background-position從內邊距開始計算

　　　　　　content-box:背景圖片的偏移量從內容區處計算

　　　　　　border-box:背景圖片的變數從邊框處開始計算

　　例如：background-origin: border-box;

　　　background-clip: border-box;

設定背景圖片的尺寸 background-size

　　需要兩個值作為引數：寬度 高度

　　　　可選值：

　　　　contain 完整顯示背景圖片，可能會有位置沒有圖片

　　　　cover 圖片比例不變，使圖片將元素填滿，可能有部分圖片從元素中溢位

　　　　　　background-size：如果只寫一個，則第二個預設是auto;

　　　　　　background-size:100% auto; 影象比例不變，但是寬度充滿

背景圖片是否跟隨元素移動　background-attachment

　　　　可選值：scroll:預設值，背景圖片會跟隨元素移動

　　　　fixed背景圖片會固定在頁面，不會隨元素移動

.box1{
     width: 500px;
     height: 500px;
     overflow:auto;
     padding:10px;
     background-image:url("img/2.jpg");
     !*設定背景圖片的尺寸*!
     background-size:contain;
     !*用來設定背景的重複方式*!
     background-repeat: no-repeat;
 }
 .box2{
     !*溢位*!
     height: 1000px;
     width:300px;
     background-image: url("img/1.png");
     background-repeat: no-repeat;
     !*背景圖片是否跟隨元素移動*!
     background-attachment:fixed;
     !*設定背景圖片的位置*!
     background-position: 100px 100px;
     !*背景圖片的偏移量計算的原點*!
     background-origin: border-box;
     !*設定背景顯示的區域*!
     background-clip: border-box;
 }

可將所有的值通過background來設定：背景相關的簡寫屬性，所有背景相關的樣式都通過該樣式來設定，並且樣式之間沒有順序

注意：background-size必須寫在background-position的後面，並且通過/隔開，background-position/background-size

　　　background-origin必須在background-clip的前面

　　background-color

　　background-image

　　background-repeat

　　background-position

　　background-size

　　background-origin

　　background-clip

　　background-attachment

.box3{
    width:500px;
    height: 500px;
    background: #bfa url("img/2.jpg")  center/contain border-box content-box no-repeat fixed;
}

2.問題：當按鈕狀態從link切換到hover時 或 從hover切換到active時，第一次會出現一個閃爍！

a:link{

display: block;

width: 93px;

height: 29px;

background: url("btn/btn.png");}

/*滑鼠放上去*/

a:hover{

background: url("btn/btn.png");}

/*點選情況下*/

a:active{

background: url("btn/btn.png");}

原因：圖片屬於網頁中的外部資源，外部資源都需要瀏覽器單獨傳送請求載入，瀏覽器載入外部資源時是按需載入的，用則載入，不用則不載入。

link會首先載入，而hover和active會在指定狀態觸發時才會載入。載入和顯示之間存在一個時間差，這樣在圖片載入千會出現沒有背景圖片的情況，導致閃爍！

解決方式：可以將多個按鈕儲存到一個圖片中，這樣我們一次性載入所有的圖片，然後通過偏移量來修改需要顯示的圖片即可。這個技術稱為CSS Sprite（CSS精靈），這種圖稱為雪碧圖。

優點：

1. 將多個圖片儲存到一個圖片中，降低傳送請求的次數，增加使用者的訪問速度。
2. 將多個圖片儲存到一個圖片裡，也會降低圖片的總大小，增快記載速度。

a:link{

display: block;

width: 93px;

height: 29px;

background: url("btn/btn.png");

}

/*滑鼠放上去*/

a:hover{

background-position: -93px 0;

/*background: url("btn/btn.png");*/

}

/*點選情況下*/

a:active{

background-position: -186px 0; /*在同一個圖上移動*/

/*background: url("btn/btn.png");*/

}

3. 雪碧圖的使用步驟：

1. 先確定要使用的圖示
2. 測量圖示的大小，建立一個元素
3. 將雪碧圖設定為元素的背景
4. 設定背景的偏移量，使其可以顯示圖示

.box1{

/*建立同圖示大小一樣的元素*/

width: 128px;

height: 46px;

/*將雪碧圖設定為元素的背景*/

background-image: url("img/amazon-sprite_.png");

/*設定背景的偏移量，使其可以顯示圖示*/

background-position:0 0;

}

.box2{

width: 42px;

height: 30px;

background-image: url("img/amazon-sprite_.png");

background-position: -58px -338px;

}

4.漸變：通過漸變可以設定一些複雜的背景顏色，可以實現從一個顏色向其他顏色過濾的效果！！

漸變是圖片，需要通過background-image來設定

線性漸變，顏色沿著一條直線發生變化：linear-gradient(顏色1--顏色2)

　　　　注：預設情況，自上而下；

　　　　　　　　to right to left to bottom to top

　　　　　　　　xxxdeg:deg表示度數 0：to top 180：to buttom 90：to right

　　　　　　　　1turn：轉一圈=to top；0.5turn：轉半圈=to buttom

　　　　可以指定多種顏色：幾種顏色平均分佈

　　　　也可以手動指定漸變的分佈情況

　　　　　　　　　　　　background-image: linear-gradient(red50px,green100px,yellow 150px);

　　　　重複出現效果：background-image: repeating-linear-gradient(red 50px,yellow 100px)

徑向漸變：放射性效果background-image: radial-gradient()

　　　　預設情況下，徑向漸變的形狀根據元素的形狀來計算

　　　　　　正方形：圓形

　　　　　　長方形：橢圓形

　　(1)手動指定徑向漸變的大小：background-image: radial-gradient(100px 100px,red yellow)

　　　　　　　　circle正圓；ellipse橢圓；

　　　　background-image: radial-gradient(circle,red,yellow)

　　　　重複出現效果：background-image:repeating-radial-gradient(100px 100px,red,yellow)

　　(2)手動指定漸變位置：background-image: radial-gradient(100px 100pxat 00,red,yellow)

　　　　background-image: radial-gradient(closest-side at 100px 100px,red,yellow)

　　　　background-image: radial-gradient(farthest-side at 100px 100px,red yellow)