網頁全屏背景圖
當我們使用background-image添加背景圖片時，會默認的把圖片在水平和垂直方向上鋪滿整個元素，但作為網頁背景只需要一張圖作為背景圖時，就只會希望圖片只出現一次，鋪滿整個頁面，具體步驟如下：
第一步：加入背景圖片
第一步先使用background-image屬性設定url添加一張背景圖，初始效果如下，是鋪滿整個螢屏的：
// 插入一張背景圖片
background-image: url("images/bj_2.jpg");
第二步：設定背景平鋪方式
第二步使用background-repeat 屬性，設定no-repeat屬性值讓圖片不重鋪，
background-image: url("images/bj_2.jpg");
// 這是圖片不重鋪
background-repeat: no-repeat;
background-repeat 屬性值如下：
| 屬性值 | 內容 |
|---|---|
| repeat | 背景影像將向垂直和水平方向重復，這是默認 |
| repeat-x | 只會在水平方向重復背景圖片 |
| repeat-y | 只會在垂直方向重復背景圖片 |
| no-repeat | 圖片不會重復，只會出現一次 |
| inherit | 繼承父元素的值 |
第三步：設定圖片大小
第三步使用background-size屬性設定背景圖片大小，把寬和高長度都設定為100%，
background-image: url("images/bj_2.jpg");
background-repeat: no-repeat;
//設定圖片大小
background-size: 100%,100%;
background-size屬性值如下：
| 屬性值 | 內容 |
|---|---|
| length | 設定背景圖片高度和寬度，第一個值為寬度，第二個值為高度，如果只給出一個值，第二個值為auto(自動) |
| percentage | 以父元素的百分比設定背景影像的寬度和高度，第一個值為寬度，第二個值為高度，如果只給出一個值，第二個值為auto(自動) |
| cover | 把背景圖片縮放至足夠大，使其背景影像完全覆寫背景區域，某些部分也許無法顯示在背景定位區域中 |
| contain | 把影像縮放至最大尺寸，使其寬度和高度完全適應內容區域 |
第四步：設定背景圖隨頁面不滾動
定義背景影像之后，默認情況下，當表單的內容滾動時，表單的背景影像會跟著一起移動，這時就需要background-attachment屬性，可以控制背景影像是否跟著元素的內容一起移動
background-image: url("images/bj_2.jpg");
background-repeat: no-repeat;
background-size: 100%,100%;
//設定圖片相對于視窗固定
background-attachment: fixed;
background-attachment屬性值如下：
| 屬性值 | 內容 |
|---|---|
| fixed | 背景影像相對于表單固定，任憑頁面內容滾動，背景影像始終靜止不動 |
| scroll | 背景影像相對于元素固定，當表單的內容滾動時，表單的背景影像會跟著移動；當一般元素的內容滾動時，背景影像不會跟著移動，因為背景影像總是要跟著元素本身，但會隨元素的祖先元素或表單一起移動 |
| loca | 背景影像相對于元素的內容固定，當元素的內容滾動時，背景影像總是要跟著內容一起移動 |
補充
如果不使用background-attachment：fixed；當頁面上下滾動時，圖片總是會跟著頁面一起滾動，
當然，網頁背景填充的方式不止這一種，如果有更好的方式，小伙伴們可以在下面評論留言哦，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/201662.html
標籤：其他
上一篇：ajax異步實作檔案分片上傳
下一篇：簡單解決jsp中文亂碼問題