卡片背景模糊效果-html代码-BFW代码库

卡片背景模糊效果

代码语言：html

代码描述：卡片背景模糊效果

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.avatar {
	position: relative;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	        justify-content: center;

	width: 100px;
	height: 100px;

	border-radius: 10%;
	overflow: hidden;

	/* Subtle inner border */
	box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}

.avatar img {
	height: 70%;
	width: 70%;
	z-index: 2;

	/* Optionally add a drop shadow to the main image	 */
	/* to make it feel "lifted"	 */
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
	        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

.avatar .background {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	-webkit-transform: scale(2);

	        transform: scale(2);
	-webkit-filter: blur(13px) opacity(0.2);
	        filter: blur(13px) opacity(0.2);
}

/* Irrelevant styling */

html,
body {
	height: 100vh;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	        justify-content: center;
}

.container {
.........完整代码请登录后点击上方下载按钮下载查看