css設定背景圖片大小
網頁的某些裝飾可以通過背景圖片來渲染，使得網頁更加美觀，CSS設定背景圖片，不僅僅是大小，還有位置，放大方式，透明化之類。都是必備的CSS技能。層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。演示例項如下：
操作方法
（01）對於背景圖片的匯入，可以選擇background 或者background-image格式如下body{backgroud:url("url")}body{backgroud-image:url("url")}background: url(http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png);
（02）背景圖片的顯示方式：repeat : 預設值，背景影象在縱向和橫向上平鋪no-repeat : 背景影象不平鋪repeat-x : 背景影象僅在橫向上平鋪repeat-y : 背景影象僅在縱向上平鋪程式碼如下（儲存為html文件後用瀏覽器執行）<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png');background-repeat:no-repeat;background-position:left top;}</style></head><body><h1>Modify</h1><p>no-repeat</p></body></html>
（03）由上個例子我們可以發現，其實可以對背景圖片進行位置的定位：background-position：top left,；top righ；,bottom right；bottom left;程式碼如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'),url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png');background-repeat:no-repeat,no-repeat;background-position:right top,left top;}</style></head><body><h1>Modify</h1><p>background-position</p><p>right top and left top</p></body></html>
（04）所以可以對，background picture設定大小，首先設定視窗大小：格式：width：numbers unit (px)height：numbers unit (px)例項程式碼：<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'),url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png');background-repeat:no-repeat,no-repeat;width:300px,300px;height:280px,280px;background-position:right top,left top;background-size:contain,contain;}</style></head><body><h1>Modify</h1><p>background-size</p><p>width and height</p></body></html>
（05）我們發現對background-size的設定有cover、contain等引數。cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。例項程式碼：<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'),url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png');background-repeat:no-repeat,no-repeat;width:300px,300px;height:280px,280px;background-position:right top,left top;background-size:contain,cover;}</style></head><body><h1>Modify</h1><p>background-size</p><p>width and height</p></body></html>
（06）對圖片進行放大與縮小使用background-size：percentage程式碼例項：<!DOCTYPE html><html><head><meta charset="utf-8"><title>background_picture</title><style>body{background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'),url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png');background-repeat:no-repeat,no-repeat;background-position:50% 50%,100% 100%;background-size:contain,cover;}</style></head><body><h1>Modify</h1><p>background-size</p></body></html>格式如下：background-position : length || lengthbackground-position : position || positionbackground-position-x : length | left | center | rightbackground-position-y : length | top | center | bottom
特別提示
推薦使用瀏覽器
對背景圖片大小的設定可通過多種途徑實現
