css 设置背景色或图片半透明的方法(图文)

css设置背景颜色半透明或者设置背景图片半透明，但有的时候只需要设置最外层的div为半透明里面的内容不需要设置

下面介绍一下这两种情况

1.设置html元素你面内颜色和图片都为半透明状态支持IE浏览器

.bg1{
    background:#000;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);
}

2.设置html元素最外层的颜色为半透明，子元素不进行设置：

.bg2{
    background:rgba(0,0,0,0.5);/*前三个参数为rgb颜色，第四个参数为透明度*/
    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);/*#7F000000的前两位为16进制透明度，后六位为16进制颜色*/
}

html十六进制颜色代码地址

下面给出上面两种情况的测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置背景半透明</title>

<style>
.bg1{
    background:#000;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);
}
.bg2{
    background:rgba(0,0,0,0.5);/*前三个参数为rgb颜色，第四个参数为透明度*/
    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);/*#7F000000的前两位为16进制透明度，后六位为16进制颜色*/
}
</style>
</head>
<body>

 <div class="bg1">aafaa<br>sdfsd<br>
	<div style="background-color:red;">red</div>
	<img src="http://img0.bdstatic.com/img/image/fj1204.jpg" width="100" height="100">
 </div>
 <br>
<div class="bg2">aafaa<br>sdfsd<br>
	<div style="background-color:red;">red</div>
	<img src="http://img0.bdstatic.com/img/image/fj1204.jpg" width="100" height="100">
 </div>
</body>
</html>

css背景半透明的设置效果图如下：

css 设置背景色半透明的方法(图文)

来源：本站/作者：admin/更新时间：2013-12-22

顶

踩

javaScript CSS HTML PHP jquery flash教程 seo教程 html5 Ant

css 设置背景色或图片半透明的方法(图文)

最新文章

新热推荐

文章排行