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

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>