Html 背景色幻灯片转换

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

#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;   
} 

---

解决方案：

我认为您应该使用第二种背景色添加

span

元素，并更改其

顶部的位置。我在这里编辑了你的小提琴：。这就是你想做的吗

您还可以避免将
span
元素与伪元素一起使用。
您可以使用渐变来使用css

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

有关演示，请参见：
也许，您可以使用“背景：线性渐变（黑色50%，白色50%）；”并更新“50%”参数。我已经改变了这一点，但我不期望你如何让你的图像改变颜色？这是可行的，但我想用背景色而不是背景图像来解决它。我认为你不能通过使用背景色属性来获得相同的效果。过渡将是两种颜色之间的淡入淡出，而不是你所期望的翻译。问题是当我看到一个标志或文字在上面时，它不正常。我不明白你想发短信。事实上，我在不久前开发的一个网站上做过。我使用了两个跨度和两个不同的类。您可以在这里查看（主菜单）：。但也许有更好的办法？这正是我想要的！这是可能的，但不是我想要的方式