html中background-image屬性的設置

對於圖片，首先咱們先想到是背景圖片。由於咱們許許多的裝飾都是用背景圖片來實現的。既然這樣，那麼就從CSS控制背景圖片講起吧。

1.CSS控制背景圖片：

    對於一個網頁，咱們開始設計的時候，可能沒有過多的去想背景圖究竟是什麼，由於大多都是設計背景色就能夠了，緣由嗎，我想也很簡單，由於它與前景音樂同樣，對於網頁的打開，速度會有必定的影響。不過對於通常的我的網站，或者我的博客而言，它對展示本身的個性，固然是不可或缺的了，固然什麼都不會太過完美，有好就有壞，也就是當圖像不可用但CSS可用的時候，替換內容就不會顯示出來，所以，並不建議在導航按鈕文本或相似的狀況中使用CSS背景圖片。

    控制背景圖片的CSS屬性有不少，只要與圖片的相關的，大多都會用的上。

(1)、背景圖片的導入：

    固然你們最熟悉的固然是background與background-image了。

   爲網頁設計背景圖片的代碼是：

body {background:url("d:\images\04.jpg")}

或者

body {background-image:url("d:\images\04.jpg")}

    這樣的話，咱們就能將想要做背景的圖片導進網頁裏了。

(2)、背景圖片的顯示方式：

    固然，只用上面的代碼，是沒法表達出本身想要的效果的。由於，圖片小了，就會以平鋪的方式，若是是大了，爲顯示它，就是會出現滾動條，這樣多很差。所以，咱們還得多其進行顯示控制，也就是要用到background-repeat，

它是取值：

repeat :      默認值。背景圖像在縱向和橫向上平鋪

no-repeat :   背景圖像不平鋪

repeat-x :    背景圖像僅在橫向上平鋪

repeat-y :    背景圖像僅在縱向上平鋪

而代碼，我想只要懂一點CSS的都知道，以下：

body {background:url("d:\images\04.jpg");background-repeat:no-repeat}

    這樣的話，它就是以原圖像大小顯示了。

(3)、背景圖片的大小控制：

    不過問題是，假若圖片過大了，又怎麼辦呢？對於一個好網頁來講，最好不要用太大的圖片，緣由上面也說過了，影響打開網頁的速度。咱們最好仍是用PS或者FireWorks處理一下。不過既然我提到了，咱們也不防用CSS來實現圖片大小的控制。

    我想不少人會天然而然的用上以下代碼：

<style type="text/css">

body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}

</style>

    呵呵，想法是好的，但你所用的瀏覽器支持嗎？我想IE或者FF必定會看成沒看見吧。也許你會問，我曾經設計論壇風格時，是能夠實現的啊？我想，若是隻是上面的代碼的話，那是不可控制圖片的，由於它只是控制BODY的大小。固然，這裏也是控制不了的。若是是其它的ID標記，我想是能夠控制記標記的範圍大小，呵呵，固然也就不是圖像的大小了。

    說實話，這個問題不只困擾着大家，同時也困擾着我。由於它只是一個屬性的值，而不是一個真正的對像。呵想到了用CSS控制的話，記得告訴我哦。

    補充：W3C於9月10發佈了一篇名爲《CSS Backgrounds and Borders Module Level 3》的應文章，裏面爲CSS的背景加上了幾個咱們從未見的屬性：

background-clip   ：

background-origin   ：

background-size   ：背景尺寸。

background-break   ：

    雖然是有了這些屬性，不過如今尚未支持它們的瀏覽器。真是好苦惱啊。

   

(4)、背景圖片的位置控制：

    背景圖片，我科是導進來了，可是它的位置真有一點沒法讓人接受。由於它默認的是左上對齊。可是咱們卻不想這樣子放置，那咱們又該怎麼辦呢。不要着急，激動人心的時刻立刻到來，如今，讓咱們來認識一下background-position、background-position-x及background-position-y吧。

    a.基本語法:

background-position : length   || length

background-position : position || position

background-position-x : length | left | center | right

background-position-y : length | top  | center | bottom

    b.語法取值:

length :百分數 | 由浮點數字和單位標識符組成的長度值。

position : top | center | bottom | left | center | right

    c.示例：

body { background-image: url("d:\images\04.jpg"); background-position: 50% 50%; background-repeat:no-repeat; }

body { background-image: url("d:\images\04.jpg"); background-position-x: 50%; background-repeat:no-repeat; }

body { background-image: url("d:\images\04.jpg"); background-position-y: 50%; background-repeat:no-repeat; }

    對於取值爲length | top | center | bottom我只寫下面三個例子。

body { background-image: url("d:\images\04.jpg"); background-position: top right; background-repeat:no-repeat; }

body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat; }

body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; }

    說了這麼多例子，我想你對於定位，有必定的瞭解了吧。

(5)、背景圖片的透明設置：

    有的時候，咱們總想着去將圖片設置成透明的。

(6)、多幅背景圖片的設置：

    對於多幅背景圖片的設置，我是在《超越CSS：WEB設計藝術精髓》裏看到的。不過，卻又讓我很遺憾，由於，目前支持一個標籤內有多幅背景圖片的瀏覽器過小了，我知道的也只有Apple Safari 。以許你會問，這怎麼可能。當你看完這個實例以後，我想你會驚訝，「天啊，CSS3以前都只能給每一個元素使用一幅圖片。」若是想研究一下的話，就快快安裝一個SAFARI瀏覽器吧。對我而言，我相信，這是發展的趨勢。總之一句話，誰解釋CSS能力越強，它就將是發展的潮流，誰俱有完美的WEB準標，誰就是明日瀏覽器之星。

    代碼以下：

body {

background-image:

url("d:\mypic\001.png"),

url("d:\mypic\002.png");

url("d:\mypic\003.png");

url("d:\mypic\004.png");

background-repeat:

no-repeat,

no-repeat,

no-repeat,

no-repeat,

repeat-x,

repeat-y,

repeat-x,

repeat-y,

background-position:

top left,

top right,

bottom right,

bottom left,

top left,

top right,

bottom right,

bottom left;}

 原文在 這裏