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

Question

[Александр Панков]

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


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

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

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

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

Answer 1

[Jeiwan]

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

Comments

[Александр Панков]

Спасибо, то что нужно, я сам не догадался!

Answer 2

[YemSalat]

www.html5rocks.com/en/tutorials/masking/adobe