html点击背景图片变模糊,js实现点击上传图片并设为模糊背景
本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下
效果展示:
源码展示:
js实现点击上传图片,同时设该图片为模糊背景
input {
display:block;
margin:0 auto;
opacity:0;
position:absolute;
width:100%;
height:100%;
top:0;
z-index:10;
cursor:pointer;
}
p {
font-size:14px;
line-height:100px;
position:absolute;
top:0;
left:8px;
z-index:5;
margin:0;
}
form {
margin:0;
}
.box {
width:100px;
height:100px;
border:1px solid #f60;
border-radius:50px;
margin:0 auto;
overflow:hidden;
position:relative;
text-align:center;
}
.big-box {
width:100%;
height:250px;
position:relative;
margin-top:10px;
overflow:hidden;
padding-top:150px;
border:1px solid #000000;
}
.bg-img {
position:absolute;
width:100%;
-webkit-filter:blur(50px);
z-index:-1;
top:0;
}
img {
width:100%;
}
点击上传图片
/**
* 从 file 域获取 本地图片 url
*/
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
url = document.getElementById(sourceId).value;
} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
};
/**
* 将本地图片 显示到浏览器上
*/
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
imgPre_1.src = url;
};
$(function() {
$('input').click(function() {
$('p').hide();
});
});
感: 最近贡献一下我在教学中的小案例可以能给你一些帮助
希望继续关注我的博客
--王
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html点击背景图片变模糊,js实现点击上传图片并设为模糊背景相关推荐
- html点击展开盒子变大,JS实现点击按钮控制Div变宽、增高及调整背景色的方法
本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div ...
- 怎样让计算机背景图片变大,电脑上如何使照片调成1寸??excel调整背景图片大小...
电脑上如何使照片调成1寸? 1.用Photoshop打开照片原文件. 2.点击图像-图像大小,打开图像修改面板. 3.文档大小,宽度为2.5厘米,高度为3.5厘米,点击确定完成修改. 怎样把照片调成1 ...
- html背景图片如何和div一样大,怎么让div的大小随着背景图片的大小变大
在做网页的时候,经常会遇到为div添加背景图片,那么我们应该怎样做才能让div的大小随着背景图片的变大而变大呢,也就是让我们的div被背景图片所撑起来.下面学习啦小编告诉你! 让div的大小随着背景图 ...
- 背景图片hover加蒙层_用hover怎么将li的背景图片变透明,文字不变,是背景图片,不是img插入...
匿名用户 1级 2017-01-19 回答 1. h3,ul,li{ margin:0;无外补丁 padding:0;无内补丁} 2. ul,li{ list-style:none; 无列表样式} 3 ...
- vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径?...
用vue-cli3脚手架新建的项目,在使用less设置背景图片的时候遇到了路径报错问题,该如何正确设置背景图片的路径? 项目目录如下: 现在在css文件中有一个全局样式common.less.使用的是 ...
- html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index ...
- 鼠标点击时隐藏java代码,js实现点击展开隐藏效果(实例代码)
本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果图: 代码实例: 事件冒泡-提示框 button { wi ...
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
前言 网上没有这方面的组件和插件,本文来做优质的组件(附带详细的使用方法及源码注释),无任何第三方插件依赖. 本文实现了 在 Vue / Nuxt 项目中,实现 "横格纸" 一样的 ...
- html如何设置网页的背景图片,使放大或缩小浏览器时,页面排版和背景可以随浏览器放大缩小而排版不会改变,
用DIV+CSS写网页背景代码时,应该先写一个DIV,在这个DIV的CSS里面添加背景图片,并设置其margin为auto,宽度为100%或者auto:然后在这个DIV里面在写一个DIV,在第二个DI ...
最新文章
- apache调优详解
- 【学习笔记】JS基础语法一小时通
- 系统级性能分析工具 — Perf
- 使用IntelliJ IDEA的原因
- 第八期:继美商务部拉黑多家中国公司后,MIT开始审查对华AI合作项目
- NYOJ-心急的C小加(贪心)
- PLSQL使用ODBC导入EXCEL时DSN无下拉选项
- 软考和华为证书的含金量,哪个更适合找工作
- 泛型编程和元编程概念(先学泛型编程再学元编程)
- Python 针对Excel操作
- NLP+VS︱深度学习数据集标注工具、图像语料数据库、实验室搜索ing...
- 尚硅谷Javase项目一(家庭收支记账软件)
- 鼠标滑轮成了页面缩放的解决方法
- SylixOS进化简史
- 什么是虚拟 DOM ?
- 为什么选择嵌入式方向
- java 实体字段校验@Valid - @NotNull @NotEmpty @NotBlank - ValidExceptionHandler
- java基础_题库详解
- 正则匹配数字和字母php,用php与js实现正则匹配数字和字母组合的密码
- C语言基础-数组逆序输出