最近碰到一个实现圆角背景透明的问题,今天研究了一下,总结了两种方法:
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