0

我有一个按钮，它实际上是一个 div 冒充按钮。在 div 悬停时，我将背景更改为渐变背景。然而，渐变与我最初拥有的背景图像重叠。我怎样才能保留原始的 bg 图像。

我在问题的末尾附上了一个小提琴演示。

 <div class="cart-btn"><a href="">CART</a></div>

CSS

.cart-btn{
    margin-left:20px;
    margin-top:2px;
    width:120px;
    height:30px;
    background-color:#0396C2;
    border-radius:3px;
    background-image: url(http://www.thorlabs.com/images/newhp/shopping_cart2.png) ;
        background-repeat:no-repeat;
}
.cart-btn:hover{
    border: 1px solid #005387;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0396C2),   color-stop(100%,rgba(0,76,158,1))); /* Chrome,Safari4+ */       
    margin-top:1px;
}
.cart-btn a{
        color: #FFFFFF;
        display: block;
        line-height: 34px;
        outline: medium none;
        text-align: center;
        text-decoration: none;
}

小提琴演示

4

2 回答 2

2

您必须在悬停时再次提供图像的背景链接。

    .btn:hover{
    background: url('url of the image') no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0396C2), color-stop(100%,rgba(0,76,158,1))); /* Chrome,Safari4+ */ ;
}
于 2013-10-17T07:46:02.617 回答
1

尝试以下 css ...

演示小提琴

.cart-btn:hover{
    border: 1px solid #005387;
    background: url(http://www.thorlabs.com/images/newhp/shopping_cart2.png) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0396C2), color-stop(100%,rgba(0,76,158,1))); /* Chrome,Safari4+ */       
    margin-top:1px;

}
于 2013-10-17T07:42:23.287 回答