Question

我尝试在div中创建input ranger应用对比度过滤器：

但它不起作用

感谢您的帮助

$('#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。

根据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 + ')';
});

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

我的版本：https://jsfiddle.net/ckekj8dn/2/

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

你需要-webkit-filter for Chrome，Safari。

请检查：https://css-tricks.com/almanac/properties/f/filter/

Answer 3

请参阅https://jsfiddle.net/unuwg0q6/1/

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

您需要使用filter css来更改对比度。

带对比滤波器的输入范围

3 个答案: