h5修改头像

最新推荐文章于 2023-06-28 16:44:21 发布

百味苦

最新推荐文章于 2023-06-28 16:44:21 发布

阅读量1.7k

点赞数 1

分类专栏： js，JQuery html 前端特效文章标签：修改头像

本文链接：https://blog.csdn.net/qq_38026437/article/details/84785620

版权

这篇博客介绍了如何利用HTML5的input元素结合CSS实现一个简单的头像修改功能。通过点击图片，用户可以选取新的图片进行头像更新。文中提到了采用mui和jQuery进行辅助操作的布局方案。

摘要由CSDN通过智能技术生成

点击图片，修改图片。

一个简单的 input 遮挡img 布局

基于mui + jq

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>new webview</title>
		
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			
			.main{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				padding: 10px;
				width: 100%;
				overflow: hidden;
			}
			.himg{
				width: 2.5em;
				height: 2.5em;
			}
			.himg img{
				width: 2.5em;
				height: 2.5em;
				border:1px solid #ccc;
				border-radius: 50%;
				position:relative;
				top: -2.5em;
			}
			.m-himg{
				width: 100%;
				display: flex;
				align-items: cen