Question

这是我只使用css，但图像不居中，而且图像变得更大而不是面具

我想在这里实现相同的效果

他正在使用图片http://jackietrananh.com/img/sprite-s82d3b02845.png，但纯css或js会怎么样？

且没有

clip-path

Answer 1

.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 2

使用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 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%;
}

请注意，这个原始问题中的一些原始链接已过期，因此我根据对话对此处的意图进行了一些猜测。

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

5 个答案: