Html5 CSS設置背景圖片

昔聞H5，今學H5。

本文聊聊網頁設置背景圖片，用URL設置圖片路徑很簡單，關鍵是圖片位置匹配。

固然，圖片資源太很差，調着又太麻煩，咱們換圖，送你中get圖片資源的方式。

請看【3、設置太麻煩，咱們換圖】

1、解析一行代碼

     background:url(「…」) no-repeat fixed center top;

1. 圖片URL路徑

   • 網絡路徑：http://img.sccnn.com/bimg/338/38073.jpg
     • 示例：background:url("http://img.sccnn.com/bimg/338/38073.jpg")
   • 本地路徑：image/home.png
     • 示例：background:url("image/home.png")

2. no-repeat 、 repeat-x 、 repeat-y

   • 使用緣由：圖片大小、尺寸與網頁適配不徹底，網頁默認將圖片重複填充在網頁中。
   • no-repeat 圖片不重複
   • repeat-x 圖片沿X軸重複
   • repeat-y 圖片沿Y軸重複

3. fixed center top

   • 使用緣由：圖片引入了，位置適配很差也不行。
   • fixed 相對於瀏覽器固定背景位置
   • center 相對於瀏覽器居中
   • top 相對於瀏覽器頂部對齊

2、經過background-size設置圖片適應網頁

• 看看如下五種方式

1. 直接根據像素設置圖片大小
   • background-size:200px 100px; 
2. 根據百分比設置圖片大小
   • background-size:30% 60%;
3. 等比擴展圖片來填滿元素，即cover值
   • background-size:cover;
4. 等比縮小圖片來適應元素的尺寸，即contain值
   • background-size:contain;
5.  以圖片自身大小來填充元素，即auto值，其實也就是默認的方式
   • background-size:auto;            

3、設置太麻煩，咱們換圖

上邊說的是圖片不合適的狀況，咱們去找一些別人家的好圖片不就更好了，資源仍是不少的。

咱們平時使用的Google、UC、360等等瀏覽器，都有設置瀏覽器背景圖片的功能，那些圖片適配天然是很好的，怎麼去得到這些瀏覽器設置的背景圖片呢？

（1）打開開發者模式：用鍵盤：F12鍵或者Ctrl + Shift + i；用鼠標：右鍵---->檢查。

（2）找到裏邊的Network ------>  Img，點開后里邊是空的，刷新就行了。

（3）右鍵圖片，選擇第三項 Open image in new tab

（4）最後一步，右鍵圖片保存到本地，而後使用圖片絕對路徑，設置爲網頁的背景圖片。

學生階段，貴在探索。