Имитация изображения с помощью CSS

Question

В основном я пытаюсь смоделировать наложение изображений в Photoshop, используя изображения и CSS для меню.

Существует 2 версии фонового изображения меню: одна - нормальное состояние (розовая), а другая -активное состояние (синий).Все меню обернуто в DIV с обычным (розовым) изображением в качестве фона.

Как сделать так, чтобы каждая активная ссылка меню использовала соответствующий фрагмент синего изображения?

Какэто:

Мой код пока

Как вы думаете, это возможно с помощью CSS?

Answer 1

CSS Только решение для современных браузеров:

ul {
    background-color:#ff00ff;
    background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);  
    background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    background-image: radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    height:50px;
    width:400px;
    margin:0;
    padding:0;
    border-radius:25px;
    overflow:hidden;
}

li {
    width:100px;
    height:50px;
    float:left;
}

li:hover {
    background-color:rgba(0,0,255,0.2);
}

Нажмите, чтобы увидеть демо-версию: http://jsfiddle.net/AlienWebguy/ZLg4B/

Answer 2

Если вам нужна поддержка старых браузеров и вы не можете использовать css3, есть несколько способов сделать это.Один из них:Вы можете вырезать синее изображение всего объекта (вы можете сделать его шире)

, затем

li.active {
    background: url('path/to/yourImage.png') no-repeat -50px 0;
    /* 50px or however wide that rounded tip is */
}

li.active.first {
    background-position: left top;
}

li.active.last {
    background-position: right top;
}
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */

Answer 3

Будете ли вы когда-нибудь иметь ссылки на закругленных частях? Если нет, вы можете просто взять кусочек синего изображения шириной в пиксель и установить для него фон состояния :hover с помощью repeat-x.

Определенно есть и другие способы сделать это, но это самый простой ИМХО.

---

Редактировать: После просмотра вашей скрипки, возможно, это не так. Я хотел бы рассмотреть возможность использования JavaScript для расчета соответствующих смещений по x для каждой ссылки и таким образом использовать фрагмент наложенного изображения. Или вы можете просто сделать первую ссылку «особенным случаем» и использовать общий фон другого цвета для остальных ссылок.