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

CSS / JS User Controlled Shading Effect

本文关键字：阴影 控制 JS 用户 CSS      更新时间：2023-09-26

问题:使用JS/CSS模拟用户屏幕亮度控制?

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

但是我不知道该怎么做。我想知道我是否可以使用一个文本框来控制最后的rgba值与最大/最小值，甚至创建一个滑块，但我有一点麻烦连接css到js，然后回到控制对方。我没有任何现有的代码。

如果你认为这是不清楚的:我的目标是使用一个js滑块来控制阴影主体页简单地模拟屏幕亮度效果。

未来计划:

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

唯一的帮助我发现到目前为止:添加一些像background-color:rgba(0,0,0,0.5)到css。这将覆盖所有的黑色"页"，50%的不透明度，使所有的东西看起来更暗。这也只适用于rgba浏览器。

感谢Stack，希望有一些经验的CSS/JS开发者来帮助我:)

下面是一个快速的例子，说明如何根据范围滑动条改变不透明度。

现场演示: 

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/

下面是我的尝试: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);
});
相关文章：