3

Здравствуйте. Не подскажите, как реализовать, такой :hover эффект?
Это шапка сайта с меню:

Картинка

Загвоздка в рваном крае снизу. Как его сделать, это не проблема, например, через :before на background ставим картинку и repeat-x.

Но вот как измениться часть этого рваного края? (Изменить - поменять цвет определенной области.)

Дело в том, что он разный под всеми элементами меню (с разных мест начинается), т.е. сделать одну картинку рваного края и ее при :hover ставить, то будет неcотыковка по рисунку.

Заранее благодарен за овтет!

1 ответ 1

2

ОЙ. Подсказали!
Нужно саму картинку с фоном для рваного края сделать прозрачной в верхней части (инвертировать). Т.е. на картинке будет нарисована только нижняя (светло-желтая) часть, а верхняя будет прозрачной, и через нее будет виден задний фон (красный, оранжевый или какой угодно), который можно спокойно менять для элемента меню, т.к. он в прямоугольном li, а этот li ниже и под рваным краем будет находиться.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.