Как изменить часть background'a?

Рейтинг: 3Ответов: 1Опубликовано: 10.11.2014

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

Картинка

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

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

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

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

css html frontend вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

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