Html
    Css
    Js
* {
	padding:0;
	margin:0;
}
#blur-div {
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
#blur-image {
	display:block;
	margin:0 auto;
	filter:blur(5px);
	-webkit-filter:blur(5px);
	-moz-filter:blur(5px);
	-ms-filter:blur(5px);
	-o-filter:blur(5px);
	position:absolute;
	left:0;
	top:0;
	z-index:0;
}
#canvas {
	display:block;
	margin:0 auto;
	position:absolute;
	left:0;
	top:0;
	z-index:100;
}
.button {
	display:block;
	position:absolute;
	z-index:200;
	width:100px;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#fff;
	border-radius:5px;
	text-decoration:none;
}
#btn-reset {
	left:50px;
	bottom:20px;
	background-color:#058;
}
#btn-show {
	right:50px;
	bottom:20px;
	background-color:#085;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

canvas实现图片模糊、图片显示效果

更新时间:2021-09-17 08:17:16

0