介绍 & lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title> js实现点击上传图片,同时设该图片为模糊背景& lt;/title>
https://www.yisu.com/zixun/& lt;脚本src=" http://libs.baidu.com/jquery/1.11.3/jquery.min.js ">
<时尚>
输入{
显示:块;
保证金:0汽车;
透明度:0;
位置:绝对的;
宽度:100%;
高度:100%;
上图:0;
z - index: 10;
光标:指针;
}
p {
字体大小:14 px;
行高:100 px;
位置:绝对的;
上图:0;
左:8 px;
z - index: 5;
保证金:0;
}
{形式
保证金:0;
}
.box {
宽度:100 px;
身高:100 px;
边界:1 px固体#法郎;
border - radius: 50 px;
保证金:0汽车;
溢出:隐藏;
位置:相对;
text-align:中心;
}
.big-box {
宽度:100%;
身高:250 px;
位置:相对;
margin-top: 10 px;
溢出:隐藏;
padding-top: 150 px;
边界:1 px固体# 000000;
}
.bg-img {
位置:绝对的;
宽度:100%;
-webkit-filter:模糊(50 px);
z - index: 1;
上图:0;
}
img {
宽度:100%;
}> 头
身体<>
<表单动作=" ">
这篇文章主要讲解了js如何实现点击上传图片并设为模糊背景,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
效果展示:
源码展示:
