Image Masking using css

neel

In my website i want to show profile pictures are in a circle shape ina particular area. In my folder it is in rectangular page. For that i am using following styles but not not working

<div class="circle">
     <img src="~/Content/Member/MemberPhotos/default_user_icon.jpg"/></div> 
</div>

tried to mask with a shape image

 .circle {
width:100px;height:100px;
overflow: hidden;
-webkit-mask-image: url(crop.png);
}

and also tried the following css

.circle {  
width:100px;  
height:100px;  
border-radius: 50px;
background-color:#000; 
clip: rect(0px,50px,100px,0px); 
}

both are not masked. anybody please help me

Martin Müller
<div class="circle">
 <img src="~/Content/Member/MemberPhotos/default_user_icon.jpg" style="border-radius: 50% 50% 50% 50%" />
</div>

That should do it.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

CSS Masking in iOS

분류에서Dev

resize image using css

분류에서Dev

Keeping right tints after image masking

분류에서Dev

positioning a link on a image using css

분류에서Dev

How to replace color of PNG image using CSS?

분류에서Dev

Fill partially an SVG image with react using CSS

분류에서Dev

background image should be in diagonal using css

분류에서Dev

i want show an image in a triangle using css

분류에서Dev

Responsive grid using image sprite as CSS background image

분류에서Dev

Change a button image based on its value using CSS

분류에서Dev

Issue on Positioning Transparent Image on The Top of another Using CSS rule

분류에서Dev

How to add image at right bottom div using css

분류에서Dev

Is it possible to add text to every image path on hover using CSS?

분류에서Dev

Change SVG image color using Css or do it manually in SVG file

분류에서Dev

set css image from current folder using jquery script page

분류에서Dev

Core Image 프레임 워크에서 결과`func masking (_ mask : CGImage)-> CGImage?`복제

분류에서Dev

CSS Align image with input

분류에서Dev

Text over Image CSS

분류에서Dev

CSS - Flip image

분류에서Dev

background-image with css

분류에서Dev

CSS Responsive background image

분류에서Dev

White Line Appears when using backface-visibility to make css transition effect to zoom image on hover

분류에서Dev

HTML/CSS - image over image with parallax effect

분류에서Dev

HTML CSS Hover Image Link with One Image

분류에서Dev

css: alignment issue with image and header

분류에서Dev

Fullscreen responsive background image in CSS

분류에서Dev

CSS image overlay with color and transparency

분류에서Dev

CSS Color Overlay on Image Hover

분류에서Dev

CSS Fluid Image 문제

Related 관련 기사

뜨겁다태그

보관