<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条)