解讀html中background-image的屬性設置

時間：2024-09-15 01:56:17 HTML DOM 我要投稿

相關推薦

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

　　定義和用法

　　background-image 屬性為元素設置背景圖像。

　　元素的背景占據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。

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

　　1.CSS控制背景圖片：

　　對于一個網頁，我們開始設計的時候，可能沒有過多的去想背景圖到底是什么，因為大多都是設計背景色就可以了，原因嗎，我想也很簡單，因為它與前景音樂一樣，對于網頁的打開，速度會有一定的影響。不過對于一般的個人網站，或者個人博客而言，它對展現自己的個性，當然是不可或缺的了，當然什么都不會太過完美，有好就有壞，也就是當圖像不可用但CSS可用的時候，替換內容就不會顯示出來，因此，并不建議在導航按鈕文本或類似的情況中使用CSS背景圖片。

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

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

　　當然大家最熟悉的當然是background與background-image了。

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

　　body {background:url("d:images4.jpg")}

　　或者

　　body {background-image:url("d:images4.jpg")}

　　這樣的話，我們就能將想要作背景的圖片導進網頁里了。

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

　　當然，只用上面的代碼，是無法表達出自己想要的效果的。因為，圖片小了，就會以平鋪的方式，如果是大了，為顯示它，就是會出現滾動條，這樣多不好。因此，我們還得多其進行顯示控制，也就是要用到background-repeat，

　　它是取值：

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

　　no-repeat : 背景圖像不平鋪

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

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

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

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

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

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

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

　　我想很多人會自然而然的用上如下代碼：

　　呵呵，想法是好的，但你所用的瀏覽器支持嗎？我想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 :百分數 | 由浮點數字和單位標識符組成的長度值。

　　c.示例：

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

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

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

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

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

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

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

　　說了這么多例子，我想你對于定位，有一定的了解了吧。

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

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

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

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

　　代碼如下：

　　body {

　　background-image:

　　url("d:mypic01.png"),

　　url("d:mypic02.png");

　　url("d:mypic03.png");

　　url("d:mypic04.png");

　　background-repeat:

　　no-repeat,

　　repeat-x,

　　repeat-y,

　　repeat-x,