效果图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>rgba</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <style type="text/css"> .content{ height:300px; width: 600px; margin-top:-290px; margin-right: auto; margin-left: auto; background-color: #FFF0F5; z-index: 1;/*z值越大，越在上面*/ } .border{ height: 300px; margin-left: auto; margin-right: auto; width: 620px; margin-top: 60px; background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);/*关键代码，透明度*/ z-index: 0;/*0为最下面的这一层，显示最下面*/ } body{ background-color: #EDEDED3; } </style> <body>3 <!--透明边框 --> <div class="border"></div> <!-- 主要内容 --> <div class="content"></div> </body> </html>