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

我需要实现一个设计，我的网页，但我是一种新手与CSS

我正在尝试的是在用户图片上方添加一个框架。例如，对于任何大小的图像，我希望给定的配置文件图像如下：

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

。。。所以最终的结果是：

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

我真的需要帧高度大小等于图像高度大小，并根据用户图像放置一个框架和圆圈

---

有什么想法吗？

你应该先画正方形，然后在上面画圆圈，最后放上图像，这样会产生你想要的结果。

---

检查如何在CSS中跟踪圆。

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

嗯，有两种方法： 1) HTML:

或 2) HTML:

}嗯，有两种方法： 1) HTML:

或 2) HTML:

}以下是

这是你的电话号码

在这里试试这个。要检查透明度，请尝试更改主体颜色

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

在这里试试这个。要检查透明度，请尝试更改主体颜色

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

---

---

为什么不使用css使图像圆形并放入div？对于透明圆形，您也可以检查此问题：为什么不使用css使图像圆形并放入div？对于透明圆形，您也可以检查此问题：但这是白色背景且不透明；将不透明度设置为0的背景仍然不起作用。它只会显示

背景色
对于
.box
这里我正试图解决它，你对此有什么解决方案吗，因为有3层，背景，长方体和圆形，我想我需要创建一个带孔的正方形，但对于长方体模型，我不知道如何在不使用imageHa的情况下创建它！但我猜OP并不在乎这个，但那个是白色背景，不透明的；将不透明度设置为0的背景仍然不起作用。它只会显示
背景色
对于
.box
这里我正试图解决它，你对此有什么解决方案吗，因为有3层，背景，长方体和圆形，我想我需要创建一个带孔的正方形，但对于长方体模型，我不知道如何在不使用imageHa的情况下创建它！但我猜OP无论如何都不在乎。没错，但它不会完全创建他想要的结果。没错，但它不会完全创建他想要的结果。在这两种情况下，它都不会为图像创建透明背景。虽然你没有创建透明背景，但它是最好、更干净的实现。它得到了同样的结果，但不费吹灰之力，干杯，伙计！在这两种情况下都不会为图像创建透明背景。虽然您没有创建透明背景，但它是最好、更干净的实现。它得到了同样的结果，但不费吹灰之力，干杯，伙计！
<div class="profile_pic_cont">
   <img src="img/profile_pic_frame.png" />
</div>

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

.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;
}

<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%);
}