jquery - 带对比滤镜的输入范围

我尝试创建input ranger在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>

最佳答案

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

由于此属性为isn't supported in all browsers，因此您需要添加一些带前缀的属性以获取其他浏览器支持。我添加了-webkit前缀，以便它可以在Chrome / Safari中使用。有关浏览器支持，请参见this chart。

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


除非另有说明，否则采用以百分号表示的值的函数（如34％）也接受以十进制表示的值（如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>

关于jquery - 带对比滤镜的输入范围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34623931/