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
特別提示
推薦使用瀏覽器
對背景圖片大小的設置可通過多種途徑實現
-
如何將圖片轉換成word文字
在工作生活中,我們經常爲圖片文字識別的問題而煩惱,要知道圖片中的文字是不可編輯的,我們如果想將圖片中的文字提取出來,就只能使用識別工具對圖片進行識別,將其轉換成Word文字。可是,我們要選擇哪一款識別工具呢?大家如何將圖片轉換成Word文字呢?下面我們就一起來看看...
-
電腦無法訪問指定設備路徑或文件怎麼辦
關於電腦,現在很多人都在用它,但是有時候在打開一個程序的時候會發現突然顯示警告說無法訪問指定設備路徑或文件,下面我來教大家一種方法來解決這個問題。操作方法(01)首先我們要清楚我們安裝的這個程序,也就是軟件安裝位置在哪個盤,如果不清楚就點擊鼠標右鍵,然後打開...
-
愛剪輯怎樣截取視頻
今天的這篇和大家聊一聊關於愛剪輯怎樣截取視頻的問題,希望能夠幫助到有需要的朋友。操作方法(01)首先左鍵雙擊愛剪輯圖標,打開軟件,然後左鍵單擊片名旁邊的輸入框,輸入“示例”字樣,然後左鍵單擊製作者旁的輸入框,輸入“示例”字樣,左鍵單擊確定。(02)然後左鍵單擊左側的...
-
在Word文檔中怎麼樣進行簡繁體轉換?
字體有繁體和簡體之分,而Word文檔主要的功能是記錄保存文本文字,可能由於區域不一樣,有的喜歡用簡體有的喜歡用繁體,爲了方便查看,就需要用到簡繁體的相互轉換了。操作方法(01)方法一:比較常用的,就是用Word文檔自帶的簡繁體轉換功能,找到審閱——簡轉繁——便可將選擇的...