- 相關(guān)推薦
解讀html中background-image的屬性設置
對于圖片，首先我們先想到是背景圖片。因為我們許許多的裝飾都是用背景圖片來(lái)實(shí)現的。既然這樣，那么就從CSS控制背景圖片講起吧。
定義和用法
background-image 屬性為元素設置背景圖像。
元素的背景占據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。
默認地，背景圖像位于元素的左上角，并在水平和垂直方向上重復。
1.CSS控制背景圖片：
對于一個(gè)網(wǎng)頁(yè)，我們開(kāi)始設計的時(shí)候，可能沒(méi)有過(guò)多的去想背景圖到底是什么，因為大多都是設計背景色就可以了，原因嗎，我想也很簡(jiǎn)單，因為它與前景音樂(lè )一樣，對于網(wǎng)頁(yè)的打開(kāi)，速度會(huì )有一定的影響。不過(guò)對于一般的個(gè)人網(wǎng)站，或者個(gè)人博客而言，它對展現自己的個(gè)性，當然是不可或缺的了，當然什么都不會(huì )太過(guò)完美，有好就有壞，也就是當圖像不可用但CSS可用的時(shí)候，替換內容就不會(huì )顯示出來(lái)，因此，并不建議在導航按鈕文本或類(lèi)似的情況中使用CSS背景圖片。
控制背景圖片的CSS屬性有很多，只要與圖片的相關(guān)的，大多都會(huì )用的上。
(1)、背景圖片的導入：
當然大家最熟悉的當然是background與background-image了。
為網(wǎng)頁(yè)設計背景圖片的代碼是：
body {background:url("d:images4.jpg")}
或者
body {background-image:url("d:images4.jpg")}
這樣的話(huà)，我們就能將想要作背景的圖片導進(jìn)網(wǎng)頁(yè)里了。
(2)、背景圖片的顯示方式：
當然，只用上面的代碼，是無(wú)法表達出自己想要的效果的。因為，圖片小了，就會(huì )以平鋪的方式，如果是大了，為顯示它，就是會(huì )出現滾動(dòng)條，這樣多不好。因此，我們還得多其進(jìn)行顯示控制，也就是要用到background-repeat，
它是取值：
repeat : 默認值。背景圖像在縱向和橫向上平鋪
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像僅在橫向上平鋪
repeat-y : 背景圖像僅在縱向上平鋪
而代碼，我想只要懂一點(diǎn)CSS的都知道，如下：
body {background:url("d:images4.jpg");background-repeat:no-repeat}
這樣的話(huà)，它就是以原圖像大小顯示了。
(3)、背景圖片的大小控制：
不過(guò)問(wèn)題是，倘若圖片過(guò)大了，又怎么辦呢？對于一個(gè)好網(wǎng)頁(yè)來(lái)說(shuō)，最好不要用太大的圖片，原因上面也說(shuō)過(guò)了，影響打開(kāi)網(wǎng)頁(yè)的速度。我們最好還是用PS或者FireWorks處理一下。不過(guò)既然我提到了，我們也不防用CSS來(lái)實(shí)現圖片大小的控制。
我想很多人會(huì )自然而然的用上如下代碼：
呵呵，想法是好的，但你所用的瀏覽器支持嗎？我想IE或者FF一定會(huì )當作沒(méi)看見(jiàn)吧。也許你會(huì )問(wèn)，我曾經(jīng)設計論壇風(fēng)格時(shí)，是可以實(shí)現的��？我想，如果只是上面的代碼的話(huà)，那是不可控制圖片的，因為它只是控制BODY的大小。當然，這里也是控制不了的。如果是其它的ID標記，我想是可以控制記標記的范圍大小，呵呵，當然也就不是圖像的大小了。
說(shuō)實(shí)話(huà)，這個(gè)問(wèn)題不僅困擾著(zhù)你們，同時(shí)也困擾著(zhù)我。因為它只是一個(gè)屬性的值，而不是一個(gè)真正的對像。呵想到了用CSS控制的話(huà)，記得告訴我哦。
補充：W3C于9月10發(fā)布了一篇名為《CSS Backgrounds and Borders Module Level 3》的應文章，里面為CSS的背景加上了幾個(gè)我們從未見(jiàn)的屬性：
background-clip ：
background-origin ：
background-size ：背景尺寸。
background-break ：
雖然是有了這些屬性，不過(guò)現在還沒(méi)有支持它們的瀏覽器。真是好苦惱啊。
(4)、背景圖片的位置控制：
背景圖片，我科是導進(jìn)來(lái)了，但是它的位置真有一點(diǎn)無(wú)法讓人接受。因為它默認的是左上對齊。但是我們卻不想這樣子放置，那我們又該怎么辦呢。不要著(zhù)急，激動(dòng)人心的時(shí)刻馬上到來(lái)，現在，讓我們來(lái)認識一下background-position、background-position-x及background-position-y吧。
a.基本語(yǔ)法:
background-position : length || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top | center | bottom
b.語(yǔ)法取值:
length :百分數 | 由浮點(diǎn)數字和單位標識符組成的長(cháng)度值。
position : top | center | bottom | left | center | right
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我只寫(xiě)下面三個(gè)例子。
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; }
說(shuō)了這么多例子，我想你對于定位，有一定的了解了吧。
(5)、背景圖片的透明設置：
有的時(shí)候，我們總想著(zhù)去將圖片設置成透明的。
(6)、多幅背景圖片的設置：
對于多幅背景圖片的設置，我是在《超越CSS：WEB設計藝術(shù)精髓》里看到的。不過(guò)，卻又讓我很遺憾，因為，目前支持一個(gè)標簽內有多幅背景圖片的瀏覽器太小了，我知道的也只有Apple Safari 。以許你會(huì )問(wèn)，這怎么可能。當你看完這個(gè)實(shí)例之后，我想你會(huì )驚訝，“天啊，CSS3之前都只能給每個(gè)元素使用一幅圖片�！比绻胙芯恳幌碌脑�(huà)，就快快安裝一個(gè)SAFARI瀏覽器吧。對我而言，我相信，這是發(fā)展的趨勢�？傊痪湓�(huà)，誰(shuí)解釋CSS能力越強，它就將是發(fā)展的潮流，誰(shuí)俱有完美的WEB準標，誰(shuí)就是明日瀏覽器之星。
代碼如下：
body {
background-image:
url("d:mypic01.png"),
url("d:mypic02.png");
url("d:mypic03.png");
url("d:mypic04.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;}
【解讀html中background-image的屬性設置】相關(guān)文章：
PPT中編號設置08-23
IE瀏覽器默認HTML編輯器的設置方法07-29
word中如何設置頁(yè)碼09-20
word中頁(yè)碼怎么設置07-21
如何設置網(wǎng)站中的鏈接08-06
AutoCAD中如何設置比例07-19
關(guān)于Dreamweaver中怎么讓html網(wǎng)頁(yè)中的table邊框細線(xiàn)顯示?08-15
解讀Rnd 函數中的asp08-03
word中怎么設置超鏈接07-28