背景图片蒙版和头像圆形效果

  在项目的制作过程中，我们常常需要将个人资料的头像设置成圆形，背景图片添加蒙版效果。效果图如下：

  想要完成以上效果，我们只需要给界面加上CSS样式即可。

  一、背景图蒙版效果，可以使用图片或者渐变作为遮罩层

-webkit-mask-image:url | gradient 
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
-webkit-mask-position:x y;
-webkit-mask-clip:border | padding | content
-webkit-mask-origin:border | padding | content 

简写：-webkit-mask:url("04.png")  40px  55px  no-repeat;

我这里用到的是/* filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6; */

  二、头像设置成圆形效果，需要给头像一个固定的宽高，允许为元素添加圆角边框。

.head{
  width: 100px;
  height: 100px;
  border-radius:50%;
}

  三、总结和心得

以上的头像的上传和显示可以参考我的另一篇文章：https://blog.csdn.net/qq_40128701/article/details/90719629