Фоновый цвет слайд-перехода

У меня есть это решение, но я хочу это с фоновым цветом не с фоновым изображением. Как это возможно?Фоновый цвет слайд-перехода

#contentrightbox { 
    width: 80px; 
    height: 60px; 
    float: left; 

    display:block; 
    background:url(http://s7.directupload.net/images/140101/648rkjkd.gif); 

    -webkit-transition: background-position 100ms ease-in-out; 
    -moz-transition: background-position 100ms ease-in-out; 
    -ms-transition: background-position 100ms ease-in-out; 
    -o-transition: background-position 100ms ease-in-out; 
    transition: background-position 100ms ease-in-out; 
} 

#contentrightbox:hover { 
    background-position:0px -58px; 
}

РЕШЕНИЕ: Final Fiddle

источник

2014-01-17 martin85

Может быть, вы могли бы играть с «фоном: линейно-градиентом (черный 50%, белый 50%);» и обновите параметр «50%». –

http://jsfiddle.net/M927W/4/ Я изменил это, но я не ожидаю, как вы получите изображение для изменения цвета? – RichieAHB

Это работает, но я хочу решить его с фоном-цветом не с фоном-изображением – martin85

Я считаю, что вы должны добавить span элемент с вашим вторым цветом фона и изменить его top положения. Я отредактировал ваш Fiddle здесь: http://jsfiddle.net/M927W/1/. Это то, что вы хотели сделать?

Вы также можете избежать использования элемента span с псевдоэлементами.

источник

2014-01-17 11:17:47

проблема в том, что когда я, но логотип или текст над ним не работает – martin85

http://jsfiddle.net/M927W/3/ – martin85

Право. Я не понимал, что вы хотите поместить текст. Фактически я сделал это на веб-сайте, который я создал некоторое время назад. Я использовал два пролета с двумя разными классами. Вы можете проверить здесь (главное меню): http://gotelltheeskimo.com/. Но, может быть, есть лучший способ сделать это? –

Вы можете сделать это с помощью CSS, используя градиент

background-image: linear-gradient(to bottom, black 50%, white 50%);

для демонстрации см: jsFiddle

источник

2014-01-17 11:26:00 Martin

Это возможно, но не так, как я хочу – martin85

Фоновый цвет слайд-перехода

ответ

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