Ослабление изображения с использованием стилей или Javascript

Я хотел бы скрасить изображение на моей веб-странице при наведении курсора мыши с помощью css или javascript. Я видел несколько примеров, используя непрозрачность и фильтры в стилях, но они, похоже, не работают для меня.

Заранее спасибо

Ответы

Ответ 1

[ОБНОВЛЕНИЕ]

Чистым решением CSS было бы использовать CSS-фильтры:

img:hover {
    filter: brightness(1.5);
}

Здесь мы добавляем 50% яркости ко всем изображениям при наведении.

Почему бы и нет? Вы всегда можете установить фон родительского контейнера на #fff (белый), а затем уменьшить непрозрачность изображения.

HTML:

<div class="white">
    <img src="image.jpg" alt="Image" />
</div>

CSS

.white { background: #fff; }
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Другим решением является использование библиотеки JavaScript, например Pixastic.

Ответ 2

Вы можете использовать спрайты CSS. Создайте 2 версии изображения: один нормальный, один яркий и объедините их в 1 изображение с помощью Photoshop или любого другого использования.

Хорошее объяснение того, что CSS спрайты здесь.

Конечно, это может быть не то, что вы можете использовать на своем сайте. Например, это, вероятно, не то, что вы хотели бы использовать на больших изображениях (они бы удвоились по размеру). Вы также не могли бы сделать это таким образом, если изображения, которые вы хотите улучшить, поступают из внешних источников или загружаются пользователями, например. Это будет хорошо работать для таких вещей, как изображения на панели навигации и другие элементы пользовательского интерфейса.

Ответ 3

Я бы использовал что-то liek:

  filter: alpha(opacity=80);
  opacity: 0.8;

Насколько я знаю, это единственный способ сделать это в CSS. Это то, что вам нужно?