Question

我已经构建了这个解决方案，但我希望这与背景颜色而不是背景图像。这怎么可能？

#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

Answer 1

您可以使用渐变

对css执行此操作

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

演示请参阅：jsFiddle

Answer 2

我相信您应该使用第二种背景颜色添加span元素并更改其top位置。我在这里编辑你的小提琴：http://jsfiddle.net/M927W/1/。这是你想做的吗？

您还可以避免使用带有伪元素的span元素。

背景颜色幻灯片过渡

2 个答案: