Тонкое изображение с использованием CSS без наложения

Можно ли закрасить изображение определенным цветом с помощью CSS без наложения в браузере WebKit?

Неудачные попытки

Управляет оттенком сепию изображения или произвольного цвета с помощью hue-rotate, но не смог найти способ подкрасить его определенным цветом.
Создание фильтра "оттенков" SVG и вызов его с помощью -webkit-filter: url(#tint) не работает в Chrome.
Все возможные комбинации свойств opacity/box-shadow css с фильтрами drop-shadow/opacity не генерируют желаемого эффекта.

Идеи

Учитывая цвет, не удалось бы объединить фильтры HSB (hue-rotate, saturation, brightness) для генерации своего оттенка?

Ответ 1

В конце концов это будет, используя шейдеры. См. Документы W3C на фильтрах.

В настоящий момент возможно, например:

-webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/
-webkit-filter: brightness(50%);

См.

Обновление

Adobe выпустила свой HTML5 CSS Filter Labs с поддержкой пользовательские фильтры (шейдеры) в поддерживаемых браузерах:

Ответ 2

Это возможно с использованием фильтра SVG сегодня без использования шейдеров. Вы можете использовать это как фильтр CSS (хотя он не будет работать в IE) через -webkit-filter: синтаксис "url (#yourfilterID)" и т.д.

<svg width="800px" height="600px" viewbox="0 0 800 600">
    <defs>
        <filter id="f1" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
        <feColorMatrix id="tinter" type="matrix" values=".6 .6 .6 0 0 
                                                            .2 .2 .2 0 0 
                                                            .0 .0 .0 0 0 
                                                             0    0   0 1 0"/>
        </filter>     
    </defs>

 <image x="0" y="0" width="550" height="370" preserveAspectRatio="true"
    filter="url(#tinter)" xlink:href="http://www.crossfitwaxahachie.com/wp-content/uploads/2012/04/IMG_0752.jpg"/>
</svg>

Динамическое демо на http://codepen.io/mullany/details/baLkH/

Ответ 3

Пока нет отдельного фильтра оттенков, вы можете сделать его одним из состава существующих фильтров без затенения.

Объедините сепию, чтобы унифицировать цвет, затем поменяйте цвет на цвет, который хотите, чтобы он был окрашен с помощью

-webkit-filter: sepia(90%) hue-rotate(90deg);

Я использую границы с альфа-значением для моих оттенков, на самом деле это оверлей, но не использует никаких дополнительных элементов DOM, что упрощает переход к сепии + оттенок-поворот, когда другие браузеры получают эти фильтры.

Ответ 4

box-shadow: inset 0px 0px 64px 64px cornflowerblue, 0px 0px 4px 4px cornflowerblue;

Оттенок любого цвета (а не сепия или фильтры вращения, которые не поддерживаются повсюду) может быть достигнуто с помощью вставки-тени в соответствующем размере.

Ответ 5

Как насчет подкладки?

HTML:

<span class="tint"><img src="..." /></span>

CSS

.tint { background-color:red; display:inline-block; }
.tint img { opacity:0.8 }

Подчеркните цвет и непрозрачность по своему усмотрению. На самом деле это не работает с изображениями с прозрачностью в них.