css設置背景圖片大小

電腦
關注：1.41W次

網頁的某些裝飾可以通過背景圖片來渲染，使得網頁更加美觀，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