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
特別提示
推薦使用瀏覽器
對背景圖片大小的設定可透過多種途徑實現
-
Wps表格的基本操作及簡單數據計算
在日常生活或辦公中,我們常常需要製作表格並對錶格做一些計算,而Wps表格爲我們製作表格和計算數據提供了非常便利的條件,今天小編就來爲大家講解一下Wps表格的基本操作及簡單數據計算。例如,我們要製作下面的表格:操作方法(01)輸入文字內容。(02)將表題文字居中。選中A1...
-
stdole32.tlb丟失或損壞怎麼辦
Excel是我們辦公時候最常用的辦公軟件之一,但是有些win7專業版用戶在使用Excel的過程中出現了“某個對象程序庫丟失或損壞”的警告,這究竟是怎麼回事呢?雖然有這個錯誤提示,但是Excel大部分功能還是可以正常使用的。下面由小編給大家介紹一下丟失或損壞的解決方法...
-
Pr怎樣匯出清晰視頻
在PR上編輯過的視頻怎麼匯出才能得到清晰的畫質呢?下面就來告訴大家如何操作。操作方法(01)開啟PR,找到選單欄的“檔案”,選擇“新建”,再找到“序列”。(02)這個時候會進行源檔案設定,若是想要高清視頻,就選擇“digitalSLR1080P“。(03)然後就可以編輯視頻了,編輯完成後再...
-
如何檢視網絡計算機和設備?
現在我們的電腦,辦公的基本都是與單位局域網相連的,這是爲了方便公司內部數據的傳輸與查詢。因此在工作的網絡中除了知道自己的電腦外,也想知道其它的電腦工作狀態。那麼如何檢視呢?現在和大家分享一下實際操作。操作方法(01)點擊電腦桌面左下角的開始圖標,進入電腦主...