用纯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);

 }