小編給大家分享一下Css中的背景屬性怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)是一家專業(yè)提供文山州企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為文山州眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

1、背景包括背景顏色、背景圖像

背景顏色：使用單一色作為背景

背景圖像：以圖片做背景、以漸變色做背景

1、背景顏色

屬性:background-color：顏色值;

2、背景圖片

屬性：background-image

取值:url(圖像路徑);

background-image：url("images/logo.png");

background-image：url('images/logo.png');

background-image：url(images/logo.png);

3、背景重復(fù)

屬性:background-repeat:

取值:

repeat :默認(rèn)值，垂直和水平都平鋪

repeat-x :僅在水平方向平鋪

repeat-y :僅在垂直方向平鋪

no-repeat :不平鋪，僅顯示一次

4、背景圖片尺寸

屬性：background-size

取值：value1 value2 :寬度 高度 或者 value% value2% :百分比

cover：擴(kuò)大背景圖像，使背景圖完全覆蓋背景區(qū)域，直到碰到最后一個(gè)邊緣才停止

contain：擴(kuò)大背景圖像,碰到第一個(gè)邊緣就停止

5、背景圖像固定

屬性：background-attachment

取值：scroll即默認(rèn)，滾動(dòng)定位 fixed即固定定位

6、背景定位

背景圖像在區(qū)域中的哪個(gè)位置進(jìn)行顯示

屬性:background-position

取值: x% y%： 水平位置 垂直位置 或者 x y：水平位置 垂直位置

x為正 ， 向右移動(dòng)

x為負(fù) ， 向左移動(dòng)

y為正 ， 向下移動(dòng)

y為負(fù) ， 向上移動(dòng)

left right top bottom

center :居中(x,y)

x：可取值為 left , right , center

y：可取值為 top , bottom, center

background-position：left top;

background-position：center;

常用方式：

1、創(chuàng)建一個(gè)與要顯示圖標(biāo)大小一樣的元素

2、為創(chuàng)建好的元素設(shè)置背景圖像(大背景圖)

3、通過background-position，將圖片移動(dòng)到指定的位置處

以上是“Css中的背景屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！