background

background-image屬性是什么？

background-image屬性為元素設(shè)置背景圖像。

background-image屬性用于為元素設(shè)置一個或多個背景圖像，多個背景圖像使用逗號來分隔。各個背景圖像以堆疊的方式逐張放置在元素的上面。

在各個背景圖像層中，第一個圖像層最接近屏幕前的觀察者。元素的邊框會被繪制在背景圖像的上面，而元素的background-color（背景顏色）則會被繪制在所有背景圖像的下面。

background-image屬性值模式

background-image的屬性值模式就是用來給它加“特技”的。它的值模式有：

1、url()模式；

2、linear-gradient()模式；

3、repeating-linear-gradient()模式；

4、radial-gradient()模式；

5、repeating-radial-gradient()模式；

6、none特殊值。

除了url()模式，其他模式在其他的文章中都有過詳細的介紹，如果不知道，出門左轉(zhuǎn)。下面我來講講url()模式。和image標簽中的src寫法類似，url()中可以寫絕對路徑，也可以寫相對路徑，甚至也可以寫其他域名下的圖片資源。另外url()中的路徑加不加引號也無所謂。

background-image屬性是什么？

background-image 屬性為元素設(shè)置背景圖像。

元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距。

默認地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。

提示：請設(shè)置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。

詳細說明：

background-image 屬性會在元素的背景中設(shè)置一個圖像。

根據(jù)background-repeat屬性的值，圖像可以無限平鋪、沿著某個軸（x 軸或 y 軸）平鋪，或者根本不平鋪。

初始背景圖像（原圖像）根據(jù)background-position屬性的值放置。

CSS background-image的定義和用法

background-color 屬性設(shè)置元素的背景顏色。
background-color 屬性為元素設(shè)置一種純色。這種顏色會填充元素的內(nèi)容、內(nèi)邊距和邊框區(qū)域，擴展到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。
transparent 值
盡管在大多數(shù)情況下，沒有必要使用 transparent。不過如果您不希望某元素擁有背景色，同時又不希望用戶對瀏覽器的顏色設(shè)置影響到您的設(shè)計，那么設(shè)置 transparent 值還是有必要的。 默認值：transparent繼承性：no版本：CSS1JavaScript 語法：object.style.backgroundColor=#00FF00　　body {background-color:yellow;}h1 {background-color:#00ff00;}p {background-color:rgb(255,0,255);}

1.CSS background屬性與background-image屬性

在書寫css樣式時，background屬性與background-image經(jīng)常用來設(shè)置背景圖片，容易搞混。

background屬性包含background-image屬性，是在一個聲明中設(shè)置所有的背景屬性。

連background-image在內(nèi)，background屬性包含以下：

background-color     規(guī)定要使用的背景顏色。1

background-position     規(guī)定背景圖像的位置。1

background-size     規(guī)定背景圖片的尺寸。3

background-repeat     規(guī)定如何重復(fù)背景圖像。1

background-origin        規(guī)定背景圖片的定位區(qū)域。3

background-clip     規(guī)定背景的繪制區(qū)域。3

background-attachment     規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動。1

background-image     規(guī)定要使用的背景圖像。1

inherit    規(guī)定應(yīng)該從父元素繼承 background 屬性的設(shè)置。1

通常在寫css的時候，一般都直接用background做全局設(shè)置，不單獨去設(shè)置。

用background做全局設(shè)置時，要將所有背景屬性寫在一個聲明中

body { background: red }

p { background: url("chess.png") 40% / 10em gray  round fixed border-box; }

分拆寫法如下

body {

    background-color: red;

    background-position: 0% 0%;

    background-size: auto;

    background-repeat: repeat;

    background-clip: border-box;

    background-origin: padding-box;

    background-attachment: scroll;

    background-image: none }

p {

    background-color: gray;

    background-position: 40% 50%;

    background-size: 10em 10em;

    background-repeat: round;

    background-clip: border-box;

    background-origin: border-box;

    background-attachment: fixed;

    background-image: url(chess.png) }

  background：no-repeat scroll  0px 0px /  300px 300px   rgba(0, 0, 0, 0);

  background-position與background-size之間 必須用  / 做分割 

  前面是background-position  后面是 background-size 

background-image:url()用法

background-image:url()用法如下：

background-image為元素設(shè)置背景圖像，占據(jù)了元素的全部尺寸。

1、示例：

.div{。

background-image:url（xxx.jpg）；}。

background-image是指在元素背景中設(shè)置一個圖像。

url是指圖像的地址位置。

xxx.jpg是指圖片名稱以及前面需要添加圖片路徑。

2、background-image默認以左上角垂直的水平方向重復(fù)。

url可以使用絕對路徑也可以使用相對路徑。

3、默認值：none；不顯示默認圖像。

繼承;no。

css3中屬性值可以是多值模式，多個用英文逗號分隔。

示例:

background-image。

url(aaa.jpg)。

url(bbb.jpg)。

4、background-position屬性設(shè)置圖像的起始位置。

background-repeat定義圖像的平鋪模式。

background-attachment定義圖像固定或者是頁面滾動。

5、javascript使用：object.style.backgroundImage="url(xxx.jpg)" 。