仅使用CSS构建带透明圆的矩形框

Question

我需要在我的网页上实现一个设计，但我是一个CSS的新手。

我想要的是在用户图片上方添​​加一个框架。例如，对于任何尺寸的图像，我希望给定的配置文件图像如：

...我想添加一个内部有透明圆圈的矩形，如：

...所以最终结果如下：

我目前正在将此框架添加为图像，以调整用户图像的大小，但会降低分辨率。

我真的需要框架高度尺寸等于图像高度尺寸，并根据用户图像放置框架和圆圈。

任何想法？

Answer 1

此处尝试 DEMO 。要检查透明度，请尝试更改正文颜色。

<div class="outerCont">
    <div class="innerCont centerAlign">
        <img src="http://i.stack.imgur.com/FjDS6.png"/>
    </div>
</div>

---

.outerCont{
    height:300px;
    width:300px;
    position:relative;
    overflow:hidden;
}
.innerCont{
    background-color:transparent;
    border:150px solid rgb(186, 230, 255);
    border-radius:50%;
    height:200px;
    width:200px;
    overflow:hidden;
}
.innerCont img{
    position:absolute;
    height:80%;
    bottom:0;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}
.centerAlign{
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
}

Answer 2

嗯，有两种方法： 1） HTML：

<div class="profile_pic_cont">
   <img src="img/profile_pic.jpg" class="profile_pic" />
</div>

CSS：

.profile_pic_cont {
width: 100px;
height: 100px;
background-color: #d2e8f7; /* light blue */
padding: 5px;
}
.profile_pic {
border-radius: 9999px;
}

或 2） HTML：

<div class="profile_pic_cont">
   <img src="img/profile_pic_frame.png" />
</div>

CSS：

.profile_pic_cont {
width: 100px;
height: 100px;
background: #fff url('./img/profile_pic.jpg') no-repeat top left;

}

Answer 3

这里是JSFIDDLE

.circle {
    background-color:#fff;
    border-radius: 50%;
    width: 250px;
    height: 250px; 
    text-align:center;
    background-image:url('http://i.imgur.com/NGz1YlF.png');
    background-repeat:no-repeat;
    background-size:65%;
    background-position:center bottom;
}

Answer 4

您应该绘制正方形，然后绘制顶部的圆圈，最后放置图像，这将产生您想要的结果。
检查there，了解如何在CSS中跟踪圈子。