Потемнение изображения с помощью CSS (в любой форме)

Итак, я видел несколько способов затемнить изображения с помощью CSS, в том числе с закругленными углами, но моя проблема другая.

Скажем, у меня есть .png изображение, похожее на маленькую собачку (просто пойдите с ней, у меня нет хороших примеров), когда я помещаю ее на свою страницу, я даю ей размеры 100 x 100.

Но я не могу просто наложить что-то на него или нарисовать весь образ, так как это также приведет к тому, что фон собаки будет тонирован, что выглядит уродливо.

Можно ли закрасить изображение произвольной формы с помощью CSS?

(Я предполагаю, что вы понимаете мою точку зрения, и бесполезный код не нужен)

Спасибо!

Ответ 1

Вы всегда можете изменить непрозрачность изображения, учитывая сложность любых альтернатив, это может быть лучшим подходом.

CSS

.tinted { opacity: 0.8; }

Если вы заинтересованы в лучшей совместимости браузеров, я предлагаю прочитать это:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

Если вы достаточно решительны, вы можете заставить это работать еще в IE7 (кто знал!)

Примечание.. Как показывает JGonzalezD, это только темнее темнее изображение, если цвет фона обычно темнее самого изображения. Хотя этот метод может быть полезен, если вы специально не хотите омрачать изображение, но вместо этого хотите выделить его при наведении/фокусировке/другом состоянии по любой причине.

Ответ 2

Просто, как

img {
  filter: brightness(50%);
}

Ответ 3

Я бы сделал новый образ силуэта собаки (черный), а остальное же, как и исходное изображение. В html добавьте обертку div с этим силуэтом как фон. Теперь сделайте исходное изображение полупрозрачным. Собака станет темнее, а фон собаки останется прежним. Вы можете сделать: наведите трюки, установив непрозрачность исходного изображения на 100% при наведении указателя мыши. Затем собака выскакивает, когда вы наводите на него мышь.

стиль

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:}
.original:hover{opacity:1}

<div class="wrapper">
  <div class="img">
    <img src="original.png">
  </div>
</div>

Ответ 4

если вы хотите, чтобы это влияло только на background-image, вы можете использовать для этого линейный градиент, например:

  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(IMAGE_URL);

Если вы хотите, чтобы оно было темнее, увеличьте значение альфа-канала, в противном случае уменьшите значение альфа-канала.

Ответ 5

Решение только для Webkit

Быстрое решение, полагается на свойство -webkit-mask-image. -webkit-mask-image устанавливает изображение маски для элемента.

Есть несколько исправлений с помощью этого метода:

Очевидно, что работает только в браузерах Webkit
Требуется дополнительная оболочка для применения тега :after psuedo-element (теги IMG не могут содержать :before/:after псевдо-элементы, grr)
Поскольку существует дополнительная оболочка, я не уверен, как использовать функцию attr(…) CSS для получения URL тега IMG, поэтому он жестко закодирован в CSS отдельно.

Если вы можете рассмотреть эти проблемы, это может быть возможным решением. SVG-фильтры будут еще более гибкими, а решения Canvas станут еще более гибкими и будут иметь более широкий спектр поддержки (у SVG нет поддержки Android 2.x).