Question

我有一个显示返回顶部箭头图像（精灵）的div。我正在使用css更改背景位置以实现颜色更改。

如何在不使用背景位置转换的情况下转换箭头的颜色？我正在寻找背景颜色过渡效果，但我不能使用它，因为我希望div的背景是透明的。希望我的问题不会太混乱。

的CSS：

.top{
    background:url(../images/top.png) -10px -10px;
    background-repeat:no-repeat;
    width:20px;
    height:20px;
    display:block;
    margin:0 auto;
    cursor:pointer;
}

.top:hover{
    background:url(../images/top.png) -10px 30px;
}

Answer 1

您可以通过以下方式在同一图像的2个精灵之间进行转换：

.top{
    background:url(http://placekitten.com/200/300) 0px 0px;
    background-repeat:no-repeat;
    width:100px;
    height:100px;
    display:block;
    margin:0 auto;
    cursor:pointer;
    position: relative
}

.top:after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background:url(http://placekitten.com/200/300) 100px 0px;
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 2s;
}

.top:hover:after {
    opacity: 1;
}

由于您在伪元素中显示第二个精灵，因此转换不会“移动”

fiddle

Answer 2

另一种方法是不使用图像而是使用伪元素。

JSFiddle Example

.top {
    position:relative;
    width:0;
}

.top:before {
    position:absolute;
    border:20px solid transparent;
    border-bottom:20px solid red;
    content:"";
}

.top:hover:before {
    border-bottom:20px solid green;
}

透明背景div的背景颜色过渡效果？

2 个答案:

fiddle