Question

问题：使用JS / CSS模拟用户屏幕亮度控制的着色效果？

的信息： 通过控制，我想到一个简单的css / javascript组合，在整个页面上添加一个暗阴影效果，模拟亮度控制。

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

如果您认为这一点不清楚：我的目标是使用js滑块遮住正文页面以控制着色简单模仿屏幕亮度效果。

未来计划： 当我最终弄清楚如何在你们的帮助下进行着色效果时，我的计划是让用户控制着色以模拟用户控制的屏幕亮度。谢谢伙计们！

到目前为止我只找到了帮助：在css中添加背景颜色：rgba（0,0,0,0.5）等内容。这将涵盖黑色＆＃34;表格中的所有内容。 50％的不透明度使一切看起来更暗。这也仅适用于支持rgba的浏览器。

感谢Stack，希望有一些经验CSS / JS Devs帮助我：）

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);
});

CSS / JS用户控制的着色效果

2 个答案: