<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两种透明度表述</title>
<style type="text/css">
body{
background: url(web/images/background.jpg);
}
.box1{
/* 此方法透明整个元素模块 ,不管是背景还是字体, 都会变得透明. 内容会变得难以辨认*/
width: 300px;
height: 200px;
font-size: 20px;
line-height: 200px;
color: white;
text-align: center;
background: black;
/* 透明度需要兼容ie浏览器语句.*/
opacity: 0.3;
filter: alpha(opacity=30)
}
.box2{
width: 300px;
height: 200px;
font-size: 20px;
line-height: 200px;
color: white;
margin-top: 50px;
text-align: center;
/*rgba透明语句中,a的属性是不透明属性,用小数表示,1最大,0最小*/
background: rgba(0,0,0,0.3);
/*只透明背景, 文字清晰依旧*/
}
</style>
</head>
<body>
<div class="box1">这是第1个元素块</div>
<div class="box2">这是第2个元素块</div>
</body>
</html>
原文地址：https://www.cnblogs.com/jrri/p/11346856.html
时间： 2024-10-10 20:48:20