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;
}
body:after {
content: 'content';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* 从父元素继承 background 属性的设置 */
background: inherit;
/*背景模糊*/
filter: blur(3px);
z-index:-1;
}
#preview{
max-width:80%;
}
</style>
</code></pre>
</head>
<body id="body">
<input type="file" />
<input id="range" type="range" min="0" max="10" value="3" step="0.1">
<img src="" id="preview" alt=""/>
<script>
var element = document.querySelector('body');
var content = window.getComputedStyle(element, ':after');
var inp = document.querySelector("input");
var range = document.querySelector("#range");
range.oninput = function(){
content.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/qhtE 著作权归作者所有。请勿转载和采集!