如何指定特定区域的不透明度

Question

如您所见，有一个不透明度滑块。 我想以一种方式修改它，其中只有窗口的不透明度发生变化而没有其他变化。 很像下面这个色调调节器：色调调节器

 $('#bgopacity').on('input', function (value) { $('.background-color').css({ opacity: $(this).val() * '.01' }); });

 .background-color { width: 1000px; height: 500px; background: url("https://c8.alamy.com/comp/KCKGB8/classic-german-car-side-view-isolated-on-white-KCKGB8.jpg"); opacity: .5; object-fit: cover }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label>VLT</label> <input type="range" name="bgopacity" id="bgopacity" value="35" min="0" max="70" step="10" onchange="rangevalue.value=value"> <output id="rangevalue">35</output> </form> <div class="background-color"> </div>

Answer 1

这是一个使用两个 div 的示例，背景图像位于彼此之上。 （就像你展示的例子一样）

出于演示目的，我添加了灰度而不是带有较暗窗口的单独图像。

 $('#bgopacity').on('input', function (value) { $('.bottom').css({ opacity: $(this).val() * '.01' }); });

 .background { position: relative; } .bg { position: absolute; left: 0; top: 0; width: 1000px; height: 500px; background: url("https://c8.alamy.com/comp/KCKGB8/classic-german-car-side-view-isolated-on-white-KCKGB8.jpg"); } .bottom { filter: grayscale(1); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label>VLT</label> <input type="range" name="bgopacity" id="bgopacity" value="100" min="0" max="100" step="10" onchange="rangevalue.value=value"> <output id="rangevalue">100</output> </form> <div class="background"> <div class="bg top"></div> <div class="bg bottom"></div> </div>