Создайте прямоугольник прямоугольника с прозрачным кругом, используя только CSS

Мне нужно реализовать проект на моей веб-странице, но я как бы новичок с CSS.

Я пытаюсь добавить рамку над изображением пользователя. Например, для любого размера изображения я хочу, чтобы данное изображение профиля выглядело следующим образом:

введите описание изображения здесь

… Я хочу добавить прямоугольник с прозрачным кругом внутри, как: введите описание изображения здесь

… так что конечный результат будет таким:

введите описание изображения здесь

В настоящее время я добавляю этот кадр в качестве изображения, изменяя размер изображения пользователя, но уменьшая разрешение.

Мне действительно нужно, чтобы размер высоты frameworks был равен размеру высоты изображения и помещал рамку и круг в соответствии с изображением пользователя.

Есть идеи?

Ну, есть 2 способа: 1) HTML:

CSS:

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

или 2) HTML:

 

CSS:

 .profile_pic_cont { width: 100px; height: 100px; background: #fff url('./https://stackoverflow.com/questions/22332755/build-a-rectangle-frame-with-a-transparent-circle-using-css-only/img/profile_pic.jpg') no-repeat top left; 

}

Здесь попробуйте эту ДЕМО . Чтобы проверить прозрачность, попробуйте изменить цвет кузова.

 

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

ЗДЕСЬ – 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; } 

Вы должны нарисовать квадрат, затем круг поверх него и, наконец, поместить изображение, это даст результат, который вы хотите.
Проверьте, как трассировать круг в CSS.