用纯css实现在矩形中切除一个圆（镂空效果）

开发中 遇到个css的问题：怎么把头像（一个圆）放在信息框（一个矩形）里，让间隙部分透明，显示外层div的背景，起到更佳的视觉效果



像这样子，是不是感觉不用图片很难做出来？仔细看看下面的代码，透明白色部分我是用边框，镂空部分是内容，这样表现的像圆是被镂出来的，

其实是假象。

section.m-header-info >div.infoWrap section.infoContainer{

   

   width: 1062px;

   height: 150px;

   /* background-color: rgba(255,255,255,.72); */

   position: absolute;

   top:0;

   right: 0;

   bottom: 0;

   margin: auto 0; 

   overflow: hidden;

   *background-color: rgba(255,255,255,.64); /*ie7及ie7以下浏览器*/

} 

 section.m-header-info >div.infoWrap section.infoContainer:before{

   

    content: "";

    display: block;

    position: absolute;

    left:50%;

    top: 50%;

    margin-left: -1676px;

    margin-top: -1108px;

    border-radius: 50%; 

    width: 216px;

    height: 216px;

    border: 1000px solid rgba(255,255,255,.64);

 }