css背景background屬性的使用詳解

來源:互聯網
上載者:User
背景(background)是css中重要的的部分,也是需要知道的css的基礎知識之一。這篇文章將會涉及css背景(background)的基本用法,包括諸如 background-attachment 等的屬性,也會介紹有關背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4個新的背景(background)屬性)。

背景色

可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。

這條規則把元素的背景設定為灰色:

p {background-color: gray;}

如果您希望背景色從元素中的文本向外少有延伸,只需增加一些內邊距:

p {background-color: gray; padding: 20px;}

可以為所有元素設定背景色,這包括 body 一直到 em 和 a 等行內元素。

background-color 不能繼承,其預設值是 transparent。transparent 有“透明”之意。也就是說,如果一個元素沒有指定背景色,那麼背景就是透明的,這樣其祖先元素的背景才能可見。

背景映像

要把映像放入背景,需要使用 background-image 屬性。background-image 屬性的預設值是 none,表示背景上沒有放置任何映像。

如果需要設定一個背景映像,必須為這個屬性設定一個 URL 值:

body {background-image: url(/i/eg_bg_04.gif);}

大多數背景都應用到 body 元素,不過並不僅限於此。

下面例子為一個段落應用了一個背景,而不會對文檔的其他部分應用背景:

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以為行內元素設定背景映像,下面的例子為一個連結設定了背景映像:

a.radio {background-image: url(/i/eg_bg_07.gif);}

理論上講,甚至可以向 textareas 和 select 等替換元素的背景應用映像,不過並不是所有使用者代理程式都能很好地處理這種情況。

另外還要補充一點,background-image 也不能繼承。事實上,所有背景屬性都不能繼承。

背景重複

如果需要在頁面上對背景映像進行平鋪,可以使用 background-repeat 屬性。

屬性值 repeat 導致映像在水平垂直方向上都平鋪,就像以往背景映像的通常做法一樣。repeat-x 和 repeat-y 分別導致映像只在水平或垂直方向上重複,no-repeat 則不允許映像在任何方向上平鋪。

預設地,背景映像將從一個元素的左上方開始。請看下面的例子:

body{ background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}

背景定位

可以利用 background-position 屬性改變映像在背景中的位置。

下面的例子在 body 元素中將一個背景映像置中放置:

body{ background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:center;}

為 background-position 屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right 和 center。通常,這些關鍵字會成對出現,不過也不總是這樣。還可以使用長度值,如 100px 或 5cm,最後也可以使用百分數值。不同類型的值對於背景映像的放置稍有差異。

background是什麼意思、

1. 背景(與前景foreground相對)[C]
2. (事件等的)背景,遠因[C][U]
3. 出身背景;(包括學曆在內的)經曆[C][U]
4. (圖樣等的)底子[C]
5. 背景資料[U]
6. 隱形地方,幕後[the S]
7. (幹擾錄音或無線電廣播的)雜音[U]
8. 背景音樂[U]

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.