首頁  >  文章  >  web前端  >  詳解html中background-image屬性的設定_HTML/Xhtml_網頁製作

詳解html中background-image屬性的設定_HTML/Xhtml_網頁製作

WBOY
WBOY原創
2016-05-16 16:36:221726瀏覽

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

定義與用法

background-image 屬性為元素設定背景影像。

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

預設地,背景影像位於元素的左上角,並在水平和垂直方向上重複。

1.CSS控制背景圖:

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

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

    當然大家最熟悉的當然是background與background-image了。
   為網頁設計背景圖片的程式碼是:

body {background:url("d:images

body {background-image:url("d:images


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

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

repeat :      預設值。背景影像在縱向和橫向平鋪

no-repeat :   背景影像不平鋪

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

repeat-y :    背景影像僅在橫向上平鋪
repeat-y :    背景影像僅在縱向上平舖

而程式碼,我想只要懂一點CSS的都知道,如下

body {background:url("d:images

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

    不過問題是,倘若圖片過大了,又怎麼辦呢?對於一個好網頁來說,最好不要用太大的圖片,原因上面也說過了,影響開啟網頁的速度。我們最好還是用PS或FireWorks處理一下。不過既然我提到了,我們也不防用CSS來實現圖片大小的控制。     我想很多人會自然的用上如下程式碼:



複製程式碼

程式碼如下:
body{background-image:url("d:images

    呵呵,想法是好的,但你所用的瀏覽器支援嗎?我想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 | | center | bottom

    b.語法取值:

length :百分數 | 由浮點數和單位識別碼組成的長度值。
position : top | center | bottom | left | center | right

    c.例:

body { background-image: url("d:images
    對於取值為length | top | center | bottom我只寫下面三個例子。

body { background-image: url("d:images

    說了這麼多例子,我想你對於定位,有一定的了解了吧。


(5)、背景圖片的透明設定:

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

(6)、多幅背景圖片的設定:

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

   

 程式碼如下:


複製程式碼

程式碼如下:background-image:url("d:mypic
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn