CSS樣式表控制背景圖片大小

可以通過background-size屬性來設定背景圖片的大小。它可以是像素（px）或者是百分比(%)，舉例說明：background-size:950px* 200px這表示把背景圖片大小調(diào)整為寬度950像素，高度200像素。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站建設、網(wǎng)站設計、迭部網(wǎng)絡推廣、小程序制作、迭部網(wǎng)絡營銷、迭部企業(yè)策劃、迭部品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供迭部建站搭建服務，24小時服務熱線：18980820575，官方網(wǎng)址：chinadenli.net

1、background-size的語法說明：

(1)屬性名:background-size

(2)屬性值:其中 bg-size = [|| auto ]{1,2} | cover |

contain

(3)初始值:auto auto

(4)應用于:所有元素

(5)繼承性:無

(6)百分比:后面會說明

(7)計算值:根據(jù)指定

2、代碼說明：

/* 一個值: 這個值指定圖片寬度，第二個值為auto */

background-size: auto

background-size: 50%

background-size: 3em

background-size: 12px

/* 兩個值: 第一個值指定圖片的寬度，第二個值指定圖片的高度 */

background-size: 50% auto

background-size: 3em 25%

background-size: auto 6px

background-size: auto auto

/*多重背景，用逗號隔開，在CSS語法中凡語法后跟*或者#，都是可以無限重復的，但必須用逗號隔開。 */

background-size: auto, auto ????/* 請區(qū)別于background-size: auto auto*/

background-size: 50%, 25%, 25%

background-size: 6px, auto, contain

background-size: inherit

擴展資料：

背景重復：

如果需要在頁面上對背景圖像進行平鋪，可以使用?background-repeat 屬性。

屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復，no-repeat 則不允許圖像在任何方向上平鋪。

背景圖像將從一個元素的左上角開始。如下：

body

{

background-image: url(/i/eg_bg_03.gif); ?background-repeat: repeat-y;

}

背景定位：

可以利用?background-position 屬性改變圖像在背景中的位置。

下面的例子在 body 元素中將一個背景圖像居中放置：

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat; ? ?background-position:center;

}

為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現(xiàn)，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最后也可以使用百分數(shù)值。不同類型的值對于背景圖像的放置稍有差異。

參考資料來源：w3school：CSS 背景

新建css樣式背景圖片怎么分開插入圖片

css樣式背景圖片分開插入：

css中的背景(background)：

CSS2 中有5個主要的背景(background)屬性，它們是：

* background-color: 指定填充背景的顏色。

* background-image: 引用圖片作為背景。

* background-position: 指定元素背景圖片的位置。

* background-repeat: 決定是否重復背景圖片。

* background-attachment: 決定背景圖是否隨頁面滾動。

這些屬性可以全部合并為一個縮寫屬性: background。需要注意的一個要點是背景占據(jù)元素的所有內(nèi)容區(qū)域，包括 padding 和 border，但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 沒把 border 計算在內(nèi)。

background-position 屬性可以用其它數(shù)值，關鍵詞和百分比來指定，這比較有用，尤其是在元素尺寸不是用像素設置時。

關鍵詞是不用解釋的。x 軸上：

* left

* center

* right

y 軸上:

* top

* center

* bottom

順序方面和使用像素值時的順序幾乎一樣，首先是 x 軸，其次是 y 軸，像這樣：

css中怎樣引入背景圖片？

css代碼添加背景圖片：

1．背景顏色：background-color

語法：{background-color:數(shù)值}

注意：在html當中，要為某個對象加上背景色只有一種辦法，那就是先做一個表格，在表格中設置完背景色，再把對象放進單元格。這樣做比較麻煩，不但代碼較多，還要為表格的大小和定位傷些腦筋。

表格背影顏色：style="background-color:red"

2．背景圖片：background-image

語法：{background-image: url(url)|none}

3．背景重復：background-repeat

語法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

作用：背景圖片重復控制的是背景圖片平鋪與否，也就是說，結(jié)合背景定位的控制可以在網(wǎng)頁上的某處單獨顯示一幅背景圖片。

說明：參數(shù)取值范圍：

·inherit 繼承

·no-repeat 不重復平鋪背景圖片

·repeat-x 使圖片只在水平方向上平鋪

·repeat-y 使圖片只在垂直方向上平鋪

注意：如果不指定背景圖片重復屬性，瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。

4．背景固定：background-attachment

語法：{background-attachment:fixed|scroll}

·fixed：網(wǎng)頁滾動時，背景圖片相對于瀏覽器的窗口而言，固定不動

·scroll：網(wǎng)頁滾動時，背景圖片相對于瀏覽器的窗口而言，一起滾動

注意：背景圖片固定控制背景圖片是否隨網(wǎng)頁的滾動而滾動。如果不設置背景圖片固定屬性，瀏覽器默認背景圖片隨網(wǎng)頁的滾動而滾動。為了避免過于花哨的背景圖片在滾動時傷害瀏覽者的視力，所以可以解除背景圖片和文字內(nèi)容的捆綁，該為和瀏覽器窗口捆綁。

5．背景定位：background-position

語法：{background-position:數(shù)值|top|bottom|left|right|center}

作用：背景定位用于控制背景圖片在網(wǎng)頁中顯示的位置。

·帶長度單位的數(shù)字參數(shù)

·top：相對前景對象頂對齊

·right：相對前景對象右對齊

·center：相對前景對象中心對齊

·比例關系

關鍵字解釋如下:

top left = left top = 0% 0%

top = top center = center top = 50% 0%

right top = top right = 100% 0%

left = left center = center left = 0% 50%

center = center center = 50% 50%

right = right center = center right = 100% 50%

bottom left = left bottom = 0% 100%

bottom = bottom center = center bottom = 50% 100%

bottom right = right bottom = 100% 100%

注意：參數(shù)中的center如果用于另外一個參數(shù)的前面，表示水平居中；如果用于另外一個參數(shù)的后面，表示垂直居中。

6. 背景樣式：background

語法：{background:背景顏色|背景圖象|背景重復|背景附件|背景位置}

作用：背景屬性是一個更明確的背景—關系屬性的略寫。以下是一些背景的聲明。

擴展資料：

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

本文名稱：css樣式背景圖片,css樣式背景圖片設置
分享鏈接：http://chinadenli.net/article39/dsioish.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、定制網(wǎng)站、搜索引擎優(yōu)化、、品牌網(wǎng)站制作、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)