圆形图片底部遮罩

最新推荐文章于 2022-08-27 22:23:49 发布

土豆-9

最新推荐文章于 2022-08-27 22:23:49 发布

阅读量699

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_22585755/article/details/78845245

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


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

要求：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>