День добрый.
Подскажите как решить такую задачу.
Есть разметка
<div class="img">
<img src="img/img1.png" alt="">
</div>
Картинка (100х100) размещается по центру блока (200х200). Блок имеет белый фон.
как сделать градиент картинки (наложение на изображение), чтобы изображение картинки не было видно, а виден был только градиент, не выходящий за контуры изображения.
Цвет градиента может быть любой, не только белый?
Каждый раз, когда читаю это удивляюсь псевдоселекторы (типа :after не работают не работает с тегом img)
Если размеры известны, задача сводится к расположению псевдоэлемента по размерам изображения. http://jsfiddle.net/1rsbh9ta/
Если размеры будут плавать я бы оборачивал изображение в div. Тогда задача становится тривиальной.
ок. у меня это в таком виде и получалось. а мне надо, чтобы на изображения кота налаживался градиент. т.е как бы кот, но его цвет - это цвет градиента.
Не могу понять из описания как должен выглядеть результат? Можешь показать в виде изображения что имеешь в виду?
вот так. в макете - эти икноки - черные. (изначально думал, что шрифтовые - но нет. )
Вот сслыка на то, что получается сейчас http://jsfiddle.net/gorbuz9kin/nhrp6gpc/1/
Такие штуки делаются наложением PNG-шки поверх узла с градиентным фоном. В PNG-шке делаются прозрачными те пиксели, которые отвечают за рисунок. Можно использовать в качестве background градиент. http://jsfiddle.net/df4fLuud/
Понятно, что ничего непонятно. буду разбираться. спасибо за помощь!
а можно ли средствами CSS добиться прозрачности IMG (например через Opacity), чтобы сделать саму картинку прозрачной, и потом добавить нужный gradient background ?
Поиграйся со значением фона, и посмотри как выглядит само изображение звездочки из примера.
Можно некроссбраузерно использовать clipPath Clippy — CSS clip-path maker но самое простое - правильно подготовить само изображение изначально.
может тогда вообще из макета просто нарезать уже готовые IMG с нужным градиентом и не париться с CSS.
как по мне конечному пользователю сайта за компом все равно как реализован градиент на IMG - то ли в фотошопе и вставлен картинкой, то ли через “танцы с бубном” через CSS. ))
Если градиент в дальнейшем не планируется менять, то нарежь и не парься :)
Этот градиент идет по всему сайту (на кнопках, бекграунд заголовках). но конкретно по данным IMG он статичен - т.е. нет ховер-эффекта. Поэтому, скорее всего так и поступлю - нарежу с макета и вставлю картинками ))
