jquery - 带对比滤波器的输入范围

Question

我尝试创建输入范围以在div中应用对比度过滤器:

https://jsfiddle.net/ckekj8dn/

但它不起作用

感谢您的帮助

$('#contrast').on('input', function() {
  $('#mydiv').css('contrast', $(this).val() + "%");
});

#mydiv {
  width: 400px;
  height: 400px;
  background-image: url("http://www.lorempixel.com/200/200/");
  background-size: 100%;
  border: solid 1px black;
  background-repeat: no-repeat;
}

<div id="mydiv"></div>

Contrast
<input id="contrast" type="range" value="opacity_fundo" max="1" min="0" step="0.01" />
<br>

Answer 1

CSS 中没有 contrast 属性。您可能正在寻找CSS3 filter property .

由于此属性isn't supported in all browsers ，您将需要添加一些前缀属性以获得额外的浏览器支持。我添加了 -webkit 前缀，以便它可以在 Chrome/Safari 中运行。请参阅this chart用于浏览器支持。

根据 MDN 文档 filter property ，您可以传递百分比或小数。 input 元素返回一个小数，这意味着您可以简单地使用小数，也可以将小数乘以 100 并四舍五入(即，Math.round(this.value * 100 ))。

Except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34).

作为旁注，我还将范围 input 元素的值默认设置为 1(因为图像的对比度为 1)。

Updated Example

$('#contrast').on('input', function() {
  $('#mydiv').css({
    '-webkit-filter': 'contrast(' + this.value + ')',
    'filter': 'contrast(' + this.value + ')'
  });
});

在没有 jQuery 的情况下执行此操作也非常简单:

Example Here

document.getElementById('contrast').addEventListener('input', function (e) {
  var element = document.getElementById('mydiv');

  element.style.webkitFilter = 'contrast(' + this.value + ')';
  element.style.filter = 'contrast(' + this.value + ')';
});

document.getElementById('contrast').addEventListener('input', function (e) {
  var element = document.getElementById('mydiv');
      
  element.style.webkitFilter = 'contrast(' + this.value + ')';
  element.style.filter = 'contrast(' + this.value + ')';
});

#mydiv {
  width: 200px;
  height: 200px;
  background-image: url("http://www.lorempixel.com/200/200/");
  background-size: 100%;
  border: solid 1px black;
  background-repeat: no-repeat;
}

<div id="mydiv"></div>

<label>Contrast:
  <input id="contrast" type="range" value="1" max="1" min="0" step="0.01" />
</label>