background[計算機專業術語]

background[計算機專業術語]
background[計算機專業術語]
更多義項 ▼ 收起列表 ▲

background 簡寫屬性在一個聲明中設定所有的背景屬性。

概念

背景 (background) 屬性定義元素的背景效果

元素的背景區包括前景之下直到框線邊界的所有空間。因此,內容框與內邊距都是元素背景的一部分,且框線畫在背景上。

CSS 允許套用純色作為背景,也允許使用背景圖像創建相當複雜的效果;CSS 在這方面的能力遠遠在 HTML 之上。

background 是用於在一個聲明中設定所有背景屬性的一個簡寫屬性。

格式: background: {屬性值}

繼承性: NO

可能的值:

background-color

background-image

background-repeat

background-attachment

background-position

新增的值:

background-clip

background-origin

background-size

註:可以在此聲明中聲明1到5個背景屬性

這只是 CSS 1.0 的屬性 在CSS 2.0 background已經退出了歷史舞台;

例:

<style type="text/css">

body

{

background: #ff0000 url('i/eg_bg_03.gif') no-repeat fixed center;

}

</style>

詳解實例

background-color:{顏色值|transparent(默認值)} 屬性設定元素的背景顏色。

color 顏色值可以是顏色名稱、rgb 值或者十六進制數。

transparent 默認。背景顏色為透明。

例:

body

{

background-color: #00FF00

}

1.background-image:{URL(url)} 把圖像設定為背景。

url(URL) 指向圖像的路徑。

none 默認。無背景圖像。

例:

body

{

background-image: url(pic.jpg);

}

2.background-repeat:{repeat|no-repeat|repeat-X|repeat-Y} 設定背景圖像是否及如何重複。

repeat 默認。背景圖像將在垂直方向和水平方向重複。

repeat-x 背景圖像將在水平方向重複。

repeat-y 背景圖像將在垂直方向重複。

no-repeat 背景圖像將僅顯示一次。

例:

body

{

background-image: url(pic.jpg);

background-repeat: no-repeat;

}

3.background-attachment:{fixed|scroll} 背景圖像是否固定或者隨著頁面的其餘部分滾動

scroll 默認。背景圖像會隨著頁面其餘部分的滾動而移動。

fixed 當頁面的其餘部分滾動時,背景圖像不會移動。

例:

body

{

background-attachment: fixed;

background-image: url(pic.jpg);

}

4.background-position:{位置值} 屬性設定背景圖像的起始位置。

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x% y%

xpos ypos

使用百分數定位時,其實是將背景圖片的百分比指定的位置和元素的百分比位置對齊。也就是說,百分數定位是改變了背景圖和元素的對齊基點。不再像使用像素和關鍵字定位時,使用背景圖和元素的左上角為對齊基點。例如上例的background-position: 100% 50%; 就是將背景圖片的100%(right) 50%(center)這個點,和元素的100%(right) 50%(center)這個點對齊。

使用數值需要注意的是,當只有一個數值時,這個值將用於橫坐標,縱坐標將默認是50%。

例:

body

{

background-image: url(pic.jpg);

background-position: top;

}

用javascript改變背景圖片

例:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>新建網頁 1</title>

<script language="javascript">

function hi()

{

document.body.style.background="no-repeat url(../images/asp_logo1.gif) 50% 50%";

}

</script>

</head>

<body>

<input type="button" value="顯示" onclick="javascript:hi()">

</body>

</html>

相關詞條

相關搜尋

熱門詞條