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

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

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

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

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

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

спасибо!

21
css png tint

4 ответов

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

CSS:

.tinted { opacity: 0.8; }

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

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

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

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

19

просто так

img {
  filter: brightness(50%);
}
64

Я бы сделал новое изображение силуэта собаки (черный), а остальные такие же, как исходное изображение. В 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>
2

Webkit только решение

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

есть несколько gotchas с этим методом:

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

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

0