HTML个人设置中心以头像为背景类似蒙层效果

最新推荐文章于 2022-02-23 15:34:23 发布

porkczr

最新推荐文章于 2022-02-23 15:34:23 发布

阅读量2.2k

点赞数 1

分类专栏： html 网站文章标签： Html 头像背景蒙层个人设置中心

本文链接：https://blog.csdn.net/qq_30021219/article/details/52856672

版权

网站同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-control" content="private, must-revalidate" />
<title></title>
</head>
<style>
*{margin: 0px;padding: 0px;}
.to{width:500px;height:500px;border-radius:500px;overflow:hidden;position:absolute;//绝对定位，不占用位置
top:50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
}
</style>
<body>
<img style="position: absolute;-webkit-filter:blur(40px);opacity:0.4;width:100%;height:100%;" src="1.jpg">
<div class="to">
<img style="margin-left:-950px;" src="1.jpg">
</div>

</body>

</html>