這里將會介紹如何通過background-image設(shè)置背景圖片，以及背景圖片的平鋪、拉伸、偏移、設(shè)置大小等操作。

?

1. 背景圖片樣式分類

CSS中設(shè)置元素背景圖片及其背景圖片樣式的屬性主要以下幾個：

background-image?：設(shè)置元素的背景圖片。

background-repeat?：設(shè)置如何平鋪背景圖片。

background-attachment?：設(shè)置背景圖片是否固定或隨著滾動移動。

background-position?：設(shè)置背景圖片的位置。

background-size?：設(shè)置背景圖片的大小。

下面將詳細(xì)說明各屬性。

?

2.?background-image ：設(shè)置元素的背景圖片

說明：可設(shè)置元素的1個或多個背景圖片。

語法：<bg-image> [ , <bg-image> ]* | none

默認(rèn)值：none。 // 不設(shè)置元素的背景圖片。

擴展：W3C規(guī)范、MDN資料

?

2.1 設(shè)置單個背景圖片

說明：默認(rèn)情況下背景圖片進(jìn)行橫向和縱向平鋪。

1	background-image:url('res/bgA.jpg')

?

2.2 設(shè)置多個背景圖片

說明：渲染時前面的背景圖片在上層、后面的背景圖片在下層。

1 2	background-image:url('res/bgA.jpg'),url('res/bgB.jpg'); background-repeat:no-repeat;

?

3. background-repeat ：設(shè)置背景圖片的平鋪效果

說明：設(shè)置背景圖片的平鋪效果，包括水平、垂直。

語法：<repeat-style>?[ ,?<repeat-style>?]*

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

默認(rèn)值：repeat //水平和垂直平鋪

擴展：W3C規(guī)范、MDN資料

?

3.1?background-repeat:repeat-x | repeat-y |?repeat-x | repeat-y

說明：設(shè)定背景圖片水平、垂直平鋪。

示例：

1 2 3 4 5

background-repeat:repeat-x;?/* 表示水平平鋪 */ background-repeat:repeat-y;?/* 表示垂直平鋪 */ background-repeat:repeat-x?repeat-y;?/* 水平和垂直平鋪(默認(rèn)) */

?

3.2?background-repeat:space | round | no-repeat

說明：設(shè)置背景圖片的其他平鋪效果。

示例：?

1 2 3 4 5

background-repeat:space;?/* 均勻的平鋪背景圖片，不會被裁剪 */ background-repeat:round;?/* 水平和垂直平鋪背景圖片，拉伸圖片以盡可能的填充背景，不會被裁剪 */ background-repeat:no-repeat;?/* 不進(jìn)行平鋪 */

?

4.?background-attachment ：設(shè)置背景圖片是否固定或隨著滾動移動

說明：設(shè)置背景圖片是否固定或隨著滾動移動。

語法：<attachment>?[ ,?<attachment>?]*

<attachment> = scroll | fixed | local

默認(rèn)值：scroll // 背景圖片跟隨滾動條一直滾動

擴展：W3C規(guī)范、MDN資料

1 2 3 4 5

background-attachment:scroll;?/* 跟隨滾動條一起滾動。(默認(rèn)) */ background-attachment:fixed;?/* 背景圖片固定位置，不隨著滾動條滾動 */ background-attachment:local;?/* 跟隨內(nèi)容一起滾動 */

4.1 ?background-attachment:scroll; // 跟隨滾動條一直滾動。(默認(rèn))?

?

4.2?background-attachment:local; //?跟隨內(nèi)容一起滾動

?

5.?background-position ：設(shè)置背景圖片的位置

說明：設(shè)置背景圖片的位置，可設(shè)置背景圖片的4個邊角水平和縱向的起始位置。

語法：<position> [ , <position> ]*

默認(rèn)值：0% 0% // 背景圖片左上角定位于容器左上角

擴展：W3C規(guī)范、MDN資料

5.1?background-position:10px; // 背景圖片水平方向與左邊緣相距10px，垂直居中

?

5.2?background-position:10px 20px; // 背景圖片水平方向與左邊緣相距0px，垂直方向與頂部邊緣相距20px

?

5.3?background-position:left 10px bottom 20px; // 背景圖片水平方向與左邊緣相距10px，垂直方向與底部邊緣相距20px

?

6. background-size ：設(shè)置背景圖片的大小

說明：設(shè)置背景圖片的大小。

語法：<bg-size>?[ ,?<bg-size>?]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

默認(rèn)值：auto auto // 背景圖片的原始大小

擴展：W3C規(guī)范、MDN資料

示例：

1 2 3 4 5

background-size:100px;?/* 背景圖片寬度為100px，高度為auto */ background-size:100px?50%;?/* 背景圖片寬度為100px，高度為容器高度的50% */ background-size:100%?100%;?/* 背景圖片寬度為容器寬度的100%，高度為容器高度的100% */

?

7. 在線示例

地址：http://www.akmsg.com/WebDemo/CSS3-background-image.html

轉(zhuǎn)載于:https://www.cnblogs.com/libin-1/p/6134595.html

總結(jié)

以上是生活随笔為你收集整理的CSS3 background-image背景图片相关介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。