网页背景模糊调节工具 - 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(&quot;https://jsmov2.a.yximgs.com/ufile/atlas/NTI0NjY5MzY3NTEzNTQ2NjMwOV8xNjkxMDYzMTUxNTkzXzE1.jpg&quot;);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
    }
  #ouy{
		content: &quot;&quot;;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		/* 从父元素继承 background 属性的设置 */
		background: inherit;
		/*背景模糊*/
		filter: blur(3px);
        z-index:-1;
	}
  #preview{
    max-width:80%;
  }
  #range{
    position: fixed;
    top:400px;
    right:100px;
    bottom: 40px;
    left: 20px;
    transform: rotate(-90deg);
  }
&lt;/style&gt;
</code></pre>
  </head>
  <body id="body">    
  <div id="ouy"></div>
    <input type="file" />
    <input id="range" style="width:80%" type="range" value="70">
    <img src="" id="preview" alt=""/>
    <script>
      var inp = document.querySelector("input");
      range.oninput = function(){
//alert(range.value);
       var out = -range.value+100;
        ouy.style.filter=`blur(${(-range.value+100)/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>range元素弄到右面来方法是通过修改range元素的CSS样式来实现。在range元素的style属性中添加以下代码：
<pre><code class="language-css">position: fixed;
top: 400px;
right: 100px;
bottom: 40px;
left: 20px;
transform: rotate(-90deg);
</code></pre>
<p>这将使range元素固定在右侧，并且通过rotate属性将其旋转90度，使其垂直显示。</p>