Я попытался создать 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>
1
Gislef 6 Янв 2016 в 03:54

3 ответа

Лучший ответ

В CSS нет свойства contrast. Вероятно, вы ищете свойство CSS3 filter .

Поскольку это свойство поддерживается не во всех браузерах, вам нужно будет добавить некоторые свойства с префиксом для дополнительная поддержка браузера. Я добавил префикс -webkit, чтобы он работал в Chrome / Safari. См. эту диаграмму для поддержки браузера.

Согласно документации MDN для свойства filter, вы можете передать процентное или десятичное число. Элемент input возвращает десятичное число, что означает, что вы можете просто использовать десятичное число, или вы можете умножить десятичное число на 100 и округлить его (т. Е. Math.round(this.value * 100)).

Если не указано иное, функции, которые принимают значение, выраженное знаком процента (например, 34%), также принимают значение, выраженное в десятичном формате (например, 0,34).

В качестве примечания я также установил значение элемента range input на 1 по умолчанию (поскольку контраст изображения равен 1).

Обновленный пример

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

Это также довольно просто сделать без jQuery:

Пример здесь

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>
2
Josh Crozier 6 Янв 2016 в 01:30

Моя версия: https://jsfiddle.net/ckekj8dn/2/

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

Вам нужен -webkit-filter для Chrome, Safari.

Проверьте это: https://css-tricks.com/almanac/properties/f/filter /

2
tiomno 6 Янв 2016 в 01:13

См. https://jsfiddle.net/unuwg0q6/1/.

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

Вам нужно использовать filter css, чтобы изменить контраст.

1
artm 6 Янв 2016 в 00:58