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

有時大家在看css時,看到有的css屬性定義為background:transparent。意思就是背景透明。實際上background預設的顏色就是透明的屬性。

例如如果一個元素覆蓋在另一個元素之上，而你想顯示下面的元素，這時你就需要把上面這個元素的background設定transparent。

推薦手冊：css線上手冊

#下面介紹css中的background:transparent的作用

一、background的介紹

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

可能的值：

background-color
background-image
background-repeat
background-attachment
background-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

#相關文章推薦：       
1. CSS中background什麼意思？ background用法詳解
2.css如何利用transparent屬性設定透明度？ transparent屬性繪製各種三角形（程式碼實例）  
相關影片教學：
1.CSS影片教學-玉女心經版

#二、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,因為文本是可以獲得焦點的,同理其他元素也一樣.

以上是css中的關於background:transparent的介紹以及作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！