【css常见问题】用css实现透明度的方法

2020-09-24 20:08发布

最近碰到一个实现圆角背景透明的问题,今天研究了一下,总结了两种方法:

1用定位的方法实现html代码如下

<div class="container">
<div class="box">
</div>
<div class="content">
网页设计,web前端
</div>
</div>

css代码

<style type="text/css">
*{ margin:0; padding:0;}
.container{ position:relative;width:500px; height:400px;   margin:10px auto; background-color:red; overflow:hidden; }
.box{ height:400px; width:500px;background-color:#006699; opacity:0.4; filter:alpha(opacity=40); position:absolute; border-radius:0.5em; -moz-border-radius:0.5em; -webkit-border-radius:0.5em; left:0; top:0;}
.content{ position:relative;left:0;*top:10px; width:480px; height:380px;  background-color:#000; color:#fff; margin:10px;  }
</style>


2.用css3中的方法,rgba设置边框的颜色和透明度,border-radius实现边框圆角

html代码;

<div class="box">
测试
</div>

css代码

<style type="text/css">
*{ margin:0; padding:0;}
.box{ height:400px; width:500px; margin:10px auto; background-color:#006699;  border:10px solid rgba(0,0,0,0.8); border-radius:0.5em; -moz-border-radius:0.5em; -webkit-border-radius:0.5em;  }

</style>

页面来源:https://blog.csdn.net/lfcss/article/details/6899496