透明div方法-蓝易堂-玄门

透明div方法

lan988 级别:管理员 + 关注收藏

反对(0)原内容

<html>

<head>

<style>

.main{

width:100%;

height:100%;

background-color:#fff

}

/* 通过opacity设置透明度 */

.tm1{

margin:40 auto;

text-align:center;

line-height:200px;

width:800px;

height:200px;

background-color:red;

opacity: 0.5;

}

/* 通过rgba设置透明度 */

.tm2{

margin:40 auto;

text-align:center;

line-height:200px;

width:800px;

height:200px;

background-color:rgba(255,0,0,0.5);

}

</style>

</head>

<body>

<div class="tm1">透明div方法一，通过opacity设置透明度，div上的文字也透明：opacity: 0.5;</div>

<div class="tm2">透明div方法二，通过rgba设置透明度，div上的文字不透明：background-color:rgba(255,0,0,0.5);</div>

</div>

</body>

</html>