javascript - How to make a round mask over a image - Stack Overflow

admin管理员组

文章数量:1314557

This is my take using css only, but the image is not centred, and also the image get bigger not the mask

jsfiddle Demo

I want to achieve the same affect in here

.php

He is using an image .png but how this can happen with pure css or js?

and without

clip-path

This is my take using css only, but the image is not centred, and also the image get bigger not the mask

jsfiddle Demo

I want to achieve the same affect in here

http://jackietrananh./portfolio.php

He is using an image http://jackietrananh./img/sprite-s82d3b02845.png but how this can happen with pure css or js?

and without

clip-path

• javascript
• css
• mask

Share Improve this question Follow asked May 7, 2015 at 13:46 grape1grape1 74922 gold badges88 silver badges2020 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

.avatar-frame{border: 2px solid #c7b89e;}
.avatar-frame,.avatar-frame img{
    width: 50px;
    height: 50px;
    -webkit-border-radius: 30px; /* Saf3+, Chrome */
    border-radius: 30px; /* Opera 10.5, IE 9 */
    /*-moz-border-radius: 30px;  Disabled for FF1+ */
    }

more here http://www.html5rocks./en/tutorials/masking/adobe/

With css you can set it as a background and positioning it to center:

background: url("http://media.trb./media/photo/2011-11/241153480-30235112.jpg") no-repeat center center;

Here's a demo:http://jsfiddle/shbnts90/3/

Try thisFIDDLE

.circle {  
margin: 20px 0 0 20px;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
width:200px;
height:200px;
overflow: hidden;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.circle>img{
   width:100%;
   height:100%;
   max-height:100%;
}
.circle:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
 }

If you set the CSS for the image as a 50% border radius, it will create what is effectively a full circle mask around an image.

img {
  border-radius: 50%;
}

Note, some of the original links in this original question expired, so I'm guessing a little about the intent here based on the dialog.

I would acplish this as follows: HTML:

<div class="round">
   <img src="http://www.somebodymarketing./wp-content/uploads/2013/05/Stock-Dock-House.jpg"/>
</div>

CSS:

.round{
  width:10%;
  padding-top:10%;
  overflow:hidden;
  position:relative;
  border-radius:50%;
}
img{
  position:absolute;
  top:50%;
  left:50%;
  min-width:100%;
  height:100%;
  transform:translate(-50%,-50%);
  transition: 1s ease;
}
img:hover{
  height:110%;
}

Example: CodePen

本文标签： javascriptHow to make a round mask over a imageStack Overflow