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

【问题标题】：How to make a round mask over a image如何在图像上制作圆形蒙版
【发布时间】：2023-04-02 20:07:02
【问题描述】：

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

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

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

没有

clip-path

【问题讨论】：

标签： javascript css mask

【解决方案1】：

如果您将图片的 CSS 设置为 50% 的边框半径，它将在图片周围创建一个有效的完整圆形蒙版。

img {
  border-radius: 50%;
}

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

【讨论】：

【解决方案2】：

我将按如下方式完成此操作： 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

【讨论】：

【解决方案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);
 }

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：