css中的關於background:transparent的介紹以及作用

有時大家在看css時,看到有的css屬性定義為background:transparent。意思就是背景透明。實際上background預設的顏色就是透明的屬性。例如如果一個元素覆蓋在另外一個元素之上，而你想顯示下面的元素，這時你就需要把上面這個元素的background設定transparent。下面介紹css中的background:transparent的作用

一、background的介紹

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

可能的值：

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

例如

background : transparent none repeat scroll 0% 0%

分別代表

背景屬性：背景顏色 背景圖片 背景是否重複 背景時候隨瀏覽器滾動 背景平位置 背景垂直位置

background : background-color || background-image || background-repeat || background-attachment || background-position

上面CSS的解釋

transparent 表示透明無顏色，是background-color 的預設值
none 表示沒有設定背景圖片
repeat 表示圖片重複
scroll 表示背景圖片隨瀏覽器下拉而滾動
0% 水平位置在x0
0% 垂直位置在y0

二、css中的background:transparent的作用

backgroundcolor為transparent的元素的事件會對被它遮住的元素所截獲.如果我們所觸發的對象沒有焦點,那麼事件會交換給transparent的元素處理並按這個元素進行冒泡,否則有焦點的會事件便由有焦點的那個對象處理,不會交換,並且按有焦點的元素進行冒泡

1、例如如下一個div的蒙板，該功能實現屏蔽使用者對網頁上的其他元素進行操作.

div.style.position="absolute";div.style.width=document.body.clientWidth+"px";div.style.height=document.body.clientHeight+"px";div.style.left="0px";div.style.top="0px";div.style.zIndex="2000";div.style.backgroundColor="black";div.style.filter="alpha(opacity="+0+");";

主要看後面兩行代碼,如果我們沒有上面代碼的後兩句,那麼我們便可以對蒙板後的元素進行操作,也就是說起不到屏蔽的作用,但是這個操作是有限制的,具體說就是我們只可以對有焦點的元素進行操作,比如文本,圖片,按鈕等。

2、例如下面DIV

<div style="border:1px red solid;width:100px;height:100px" onclick="alert(1)">123</div>

正常情況下,只要你點擊這個div的任何位置,都會alert的,但是當它被一個backgroundcolor為transparent的元素遮住的時候,我們只有點擊123才會alert,因為文本是可以獲得焦點的,同理其他元素也一樣.