本文介绍了css中background:transparent属性的用法，background:transparent就是背景透明，这里通过一些例子为大家介绍下background:transparent的用法，需要的朋友参考下。
学习css背景属性时，会注意到css设置背景时有一个background:transparent属性，这个属性是背景透明的意思。
在css中，background默认的颜色就是透明的，因此background:transparent属性默认是不用写的。
以下结合实例，讲解下css background:transparent属性的用法，不了解的朋友一起来看看吧。
用createelement新建一个div，默认情况下这个div的style中的backgroungcolor属性是transparent。
制作一个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+");";
这是很多蒙板div的设置，会屏蔽用户对网页上的其他元素进行操作.
主要看后面两行代码，div的默认backgroundcolor属性就是transparent，也就是是透明，为里为何还要设置个black(只要不是transparent就行,也不能是空字符串,浏览器会默认将空字符串看成transparent)，并且设置滤镜让他透明？
如果没有上面代码的后两句，便可以对蒙板后的元素进行操作，即不会起到屏蔽的作用，但是这个操作是有限制的，即只可以对有焦点的元素进行操作，比如文本、图片、按钮等。
举个例子:
复制代码 代码示例:
<div style="border:1px red solid;width:100px;height:100px" onclick="alert(1)">123</div>
正常情况下，只要点击这个div的任何位置都会alert的，但是当它被一个backgroundcolor为transparent的元素遮住时，只有点击123才会alert。
原因是什么呢？
这是因为文本是可以获得焦点的，同理其他元素也一样。
这个backgroundcolor为transparent的元素的事件会对被它遮住的元素所截获。
如果所触发的对象没有焦点，那么事件会交换给transparent的元素处理并按这个元素进行冒泡，否则有焦点的会事件便由有焦点的那个对象处理，不会交换，且按有焦点的元素进行冒泡。
明白了吧，只有加了后两句，才能对网页元素进行完全屏蔽。（www.jb200.com 脚本学堂）
设置样式为透明色，如果设置了：
复制代码 代码示例:
background:inherit;
下文就可能要清除一下背景，方法为：
复制代码 代码示例:
background:transparent;
设置为透明背景，即去掉了背景。
如果一个元素覆盖在另外一个元素之上，而想显示下面的元素，需要把上面这个元素的background设置为transparent就可以了。
备注，以上有关css background:transparent属性介绍中的例子，在ie7.0下测试通过。
CSS background transparent 属性详解
在css中transparent 属性用来在 background 中将 background-color 选项设置为背景颜色透明。
background 属性
1、定义：
在一个声明中所依次设置的所有的背景属性。
2、语法：
background : background-color | background-image | background-repeat | background-attachment | background-position ;
3、示例：
复制代码 代码示例:
background: #00ff00 url(bgimg.jpg) repeat fixed top left;
}transparent 属性
1、定义：
transparent 设置 background-color 背景颜色为透明。
有关 background-color 属性的更多了解可以访问 css background-color 属性详解。
2、语法：
3、改进
background-color 在 css3 中有了稍许改进，除了设置背景颜色之外，如果元素底层的背景图不可用，还可以设置一个“回退色”，通过在回退色之前增加一个斜杠（/）来实现。
例如：
复制代码 代码示例:
background-color: green / blue;
此例中，背景色应该是绿色（green），然而，如果底层背景图不能使用的话，背景色就是蓝色而不是绿色，如果在斜杠前不指定颜色，默认为透明（transparent）。
4、示例：
1. background-color 中使用 transparent ：
复制代码 代码示例:
body {
background-color:transparent;}
2. background 简写形式中使用 transparent ：
background :transparent none repeat scroll 0% 0% ;/*** transparent 表示背景颜色透明
none 表示没有设置背景图片
repeat 表示图片在水平与垂直方向重复
scroll 表示背景图片随浏览器下拉而滚动
0% 0% 水平与垂直方向的百分比定位
***/
5、css background:transparent属性的综合实例
制作 css 导航圆角菜单
复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS导航菜单的圆角效果-www.jb200.com</title>
<style type="text/css">
ul {
height:28px;
margin:0;
padding:10px;
list-style-type:none;
background:#036;
}
.item {
float:left;
width:100px;
margin:0 -1px 0 0;
padding 0;
font: 14px Arial;
font-weight:bold;
}
.item p {
padding:0 0 2px 0;
margin:0px;
text-align:center;
background:#fb5200;
border:1px solid #333;
border-top-width:0;
}
.item div {
height: 1px;
overflow: hidden;
background: #fb5200;
border-left: 1px solid #333;
border-right: 1px solid #333;
}
.item .row0 {
height: 10px;
border: 0;
background: transparent;
}
.item .row1 {
margin: 0 5px;
background: #333;
}
.item .row2 {
margin: 0 3px;
border: 0 2px;
}
.item .row3 {
margin:0 2px;
}
.item .row4 {
margin:0 1px;
height:2px;
}
.item a, .item a:visted {
display:block;
color:#fff;
text-decoration:none;
}
.item a:hover {
background:transparent;
}
.item a:hover p {
background:#fd0;
color:#f00;
padding-bottom:12px;
}
.item a:hover .row0 {
height:0px;
}
.item a:hover .row2, .item a:hover .row3, .item a:hover .row4 {
background:#fd0;
}
</style>
</head>
<body>
<ul>
<li class="item">
<div class="row0"></div>
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>Home</p>
</a></li>
<li class="item">
<div class="row0"></div>
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>Contact Us</p>
</a> </li>
<li class="item">
<div class="row0"></div>
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>Web Dev</p>
</a> </li>
<li class="item">
<div class="row0"></div>
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>Map</p>
</a> </li>
</ul>
</body>
</html>
