<div
style="opacity:04;
background-image:url();">
<div
style="opacity:10;">
显示文字
</div>
</div>
文字元素的透明度也会是04。
于是想一想，如果有方法只改变背景的透明度就能解决此问题了。
方法1：使用一张透明的做背景可以达成效果，但是有没有更简单的方法呢？
方法2：使用RGBA。
例如：
<div
style="(0,
0,
04)">
<div>
显示文字
</div>
</div>
html background-color设置为透明的方法如下：
<html>
<head>
<title>透明表格</title>
</head>
<body background="">
<table border="0">
<tr>
<td style="background-color:#336699;filter:Alpha(opacity=50)">表格内容</td>
</tr>
</table>
</body>
</html>
background是用于在一个声明中设置所有背景属性的一个简写属性。
背景 (background) 属性定义元素的背景效果
元素的背景区包括前景之下直到边框边界的所有空间。因此，内容框与内边距都是元素背景的一部分，且边框画在背景上。
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；CSS 在这方面的能力远远在 HTML 之上。
background 是用于在一个声明中设置所有背景属性的一个简写属性。
格式: background: {属性值}
继承性: NO
可能的值：
background-color
background-image
background-repeat
background-attachment
background-position
1、首先打开html编辑器，新建一个html文件，在文件内写入两个div，设置它们的样式为div1和div2：
2、然后分别设置两个div的样式，给它们相同的高度和宽度以及颜色，最后设置box-shadow属性，这里的颜色使用rgba来设置，最后一个属性好就是设置透明度的，其中一个设置1另一个设置05即可：
3、最后在浏览器中观察两个div的阴影样式，下面的明显比上面的要淡一些。以上就是css中box-shadow设置透明度的办法：
1、准备好初始化的代码
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
</head>
<body>
<div></div>
</body>
</html>
2、初始化样式
div{
border:1px red solid;
width:800px;
height:800px;
background-color:blue;
}
3、运行结果为
4、设置背景颜色半透明的样式代码background-color:rgba(0,0,255,05);
5、运行结果为
透明原理：把背景颜色设置为rgb的方式，然后再加一个透明度就可以设置为半透明了。
注意：设置背景颜色时哪里应该写成rgba。
在css中使用rgba(255, 255, 255, 05);这样的格式来表示rgha。其中最后一个参数表示Alpha通道，表示透明度。
例如：给两个div添加一样的背景色设置不同的透明度
代码：
<div class="div1">rgba透明度04</div>
<div class="div2">rgba透明度06</div>
css：
div{
margin:10px auto;
width:200px;
height:100px;
text-align: center;
line-height: 90px;
}
div1{background: rgba(83,172,150,04);}
div2{background: rgba(83,172,150,08);}
效果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）