仅使用CSS构建带透明圆的矩形框 [英] Build a rectangle frame with a transparent circle using CSS only

问题描述

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

I need to implement a design to my webpage butI am kind of newbie with CSS.

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

What I am trying is to add a frame above the user picture. For example, for any size of image, I want that a given profile image like:

...我想在里面添加一个带透明圆圈的矩形，如：

... I want to add a rectangle with a transparent circle inside like:

...所以最终结果就像：

... so the final result would be like:

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

I am currently adding this frame as an image an resizing the user's image but it decreases resolution.

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

I really need the frame height size to be equal the image height size and put a frame and circle according to the user image.

任何想法？

推荐答案

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

Well, there are 2 ways: 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：

or 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;

}

这篇关于仅使用CSS构建带透明圆的矩形框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！