2015-11-09 2 views
0

У меня есть изображение PNG установить в качестве фона ...Как я могу дать Тень тени для определенной части изображения png при наведении?

его отображается полностью отзывчивым зрения ...

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

это можно сделать? и как я могу это сделать?

+6

Это невозможно в CSS или HTML и было бы невероятно сложно в JS. Вам будет лучше просто иметь несколько версий изображения и изменить их в зависимости от области, на которой витает. Или - даже лучше, чем использовать SVG. –

+0

Как я могу сделать это, используя одно изображение svg, которое задано как фоновое изображение? –

ответ

0

Создайте фоновое изображение из векторного документа в CorelDRAW. Каждый компонент, на который вы хотите включить dropshadow, должен быть его собственным объектом (или группой объектов).

Rasterize.

Теперь у данной части изображения есть dropshadow. Rastersize. Повторите, давая каждому полезное имя.

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

Большая часть различий должна быть равна нулю. Удалите прямоугольник из изображений diff.

Теперь, в CSS, когда вы хотите, чтобы dropshadow отображалась, используйте противоположный режим смешивания операции, которую вы использовали для создания diff. Если вы использовали xor для выполнения diff, используйте xor между diff-изображением и оригиналом. Если вы использовали обратный альфа-композит, используйте альфа-композицию.

Я не эксперт в отношении того, как работает css3 blending, вам нужно поэкспериментировать с тем, какой режим diff и какой режим наложения использовать.

Вы также можете просто поменять местами между изображениями.

Смежные вопросы