Question

我有一个按钮，实际上是一个假扮成按钮的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;
}

FIDDLE DEMO

Answer 1

你必须在悬停时再次给出图像的背景链接。

    .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+ */ ;
}

Answer 2

尝试关注css ...

Demo Fiddle

.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;

}

无法保留背景图像

2 个答案: