如何在图像上制作圆形蒙版

Question

这是我只使用 css 拍摄的，但是图像没有居中，而且图像变大了而不是蒙版

我想在这里达到同样的效果

他正在使用图像 http://jackietrananh.com/img/sprite-s82d3b02845.png，但是纯 css 或 js 怎么会发生这种情况？

无

clip-path

Answer 1

使用 css 您可以将其设置为 background 并将其定位到中心：

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

这是一个演示：http://jsfiddle.net/shbnts90/3/

Answer 2

.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+ */
    }

这里有更多 http://www.html5rocks.com/en/tutorials/masking/adobe/

Answer 3

试试这个FIDDLE

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

Answer 4

我会按如下方式完成： HTML:

<div class="round">
   <img src="http://www.somebodymarketing.com/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%;
}

示例：CodePen

Answer 5

如果您将图像的 CSS 设置为 50% 的边界半径，它会在图像周围创建一个有效的全圆蒙版。

img {
  border-radius: 50%;
}

请注意，这个原始问题中的一些原始链接已过期，所以我根据对话框猜测了一些关于这里的意图。

如何在图像上制作圆形蒙版

How to make a round mask over a image

javascript

css

mask