CSS / JS 用户控制的阴影效果

Question

问题： Shading Effect 使用 JS/CSS 模拟用户屏幕亮度控制？

信息： 通过控制，我正在考虑一个简单的 css/javascript 组合，以在整个页面模拟亮度控制上添加深色阴影效果。

但我不知道该怎么做。 我想知道我是否可以使用文本框来控制带有最大值/最小值的最后一个 rgba 值，或者甚至创建一个滑块，但是我在将 css 连接到 js 然后再回到相互控制时遇到了一些麻烦。我没有任何现有代码。

如果您认为这不清楚：我的目标是使用 js 滑块对正文页面进行着色，以控制着色 SIMPLY MOCKING 屏幕亮度效果。

未来计划： 当我终于在你们的帮助下弄清楚如何做阴影效果时，我的计划是让用户控制阴影来模拟用户控制的屏幕亮度。谢谢各位！

到目前为止我发现的唯一帮助： 将诸如 background-color:rgba(0,0,0,0.5) 之类的内容添加到 css。这将覆盖黑色“纸张”中的所有内容，不透明度为 50%，使所有内容看起来更暗。这也仅适用于支持 rgba 的浏览器。

感谢 Stack，希望有经验的 CSS / JS 开发人员帮助我:)

Answer 1

这是一个快速示例，说明如何根据范围滑块更改不透明度的叠加层。

现场演示：

var range = document.getElementById("myRange");
var overlay = document.getElementById("overlay");
range.oninput = function() {
    overlay.style.background = "rgba(0, 0, 0, " + (range.value / 100) + ")";
};
range.oninput();

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
#overlay {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

<input type="range" id="myRange" value="10" max="70" />
<div>
    Drag the slider to change the page overlay opacity.
</div>
<div id="overlay"></div>

JSFiddle 版本：https://jsfiddle.net/vw15w0ds/2/

Answer 2

这是我的尝试：http://codepen.io/IAMZERG/pen/epZZzw

html:

<div class="black"></div>
<div class="outer-container">
<div class="container">
  <div class="row">
  <h1>Shading effect</h1>
  <hr>
  <p>Lorem ipsum dolor sit amet bla bla bla.</p>
  </div>
  <div class="row">
    <div id="slider"></div>
  </div>
</div>
</div>

CSS：

.black {
  background: black;
  position: fixed;
  z-index: -1;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
#slider {
  width: 75%;
}

.outer-container {
  min-height: 1500px;
  background: white;
}

jQuery/jQuery UI...对于这么简单的事情可能有点矫枉过正：

$("#slider").slider({
  values: [100]

});
$(".outer-container").on("slide", function (event, ui) {
  var opaque = ($("#slider").slider("values")[0]+20)/ 100;
  console.log(opaque);
  $(this).css("opacity", opaque);
});