WebCat: 在线图片模糊效果调节工具
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WebCat</title>
<style>
<pre><code> body{
background-image:url("https://jsmov2.a.yximgs.com/ufile/atlas/NTI0NjY5MzY3NTEzNTQ2NjMwOV8xNjkxMDYzMTUxNTkz_11.jpg");
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
}
#ouy{
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* 从父元素继承 background 属性的设置 */
background: inherit;
/*背景模糊*/
filter: blur(1px);
z-index:-1;
}
#preview{
max-width:80%;
}
</style>
</code></pre>
</head>
<body id="body">
<div id="ouy"></div>
<input type="file" />
<input id="range" style="width:80%" type="range" value="50">
<img src="" id="preview" alt=""/>
<script>
var inp = document.querySelector("input");
range.oninput = function(){
//alert(range.value);
ouy.style.filter=`blur(${range.value/10}px)`;
}
inp.onchange = function(){
var file = inp.files[0];
var reader = new FileReader();
reader.onload = (e) =>{
body.style.backgroundImage = `url(${e.target.result})`;
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qhvL 著作权归作者所有。请勿转载和采集!