圆形图片底部遮罩

来源：互联网发布：linux sendto 编辑：程序博客网时间：2024/05/16 06:59

在移动端个人信息页面中的用户头像显示及上传图标

要求：1.头像居中 2.头像底部有遮罩的图标用以显示可以上传的状态

<style>

/** * 头部 用于外边距的 */.head-div {padding: 15px 0;}/** * 设置图片的所在位置 */.img-div {position: relative; /* 设置一个内部元素定位的基准 */overflow: hidden;/* 隐藏溢出，清除浮动 */width: 80px; /* 设置div的宽度  */height: 80px; /* 设置div的高度  */margin: 0 auto; /* div居中 */border-radius: 50%; /* div整体为圆形的 */}/** * 照相阴影 */.camera-div {position: absolute !important;/* 绝对定位,相对于父级元素  */background-color: rgba(0,0,0,0.3);/* 设置透明背景色 */text-align: center;/* 元素居中显示 */bottom: 0;/* 相对底部的距离 */width: 100% !important;/* 整个div的宽度和父级div一样，即充满整个div */height: 22px !important;/* 设置高度 */line-height: 25px;/* 内部元素的行高 */font-size: 10px !important;/* 元素的大小 */color: white;/* 元素的颜色 */}</style></head><body><div class="head-div"><div class="img-div"><img src="../image/demo/index-main-frm/c1.png" class="" /><div class="camera-div"><i class="aui-iconfont aui-icon-camerafill"></i></div></div></div>

阅读全文

0 0