無法保留背景圖像

我有一個按鈕，它實際上是一個冒充按鈕的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

來源

2013-10-17 MarsOne

你必須在懸停時再次提供圖像的背景鏈接。

.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-17 07:46:02

試試下面的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; 

}

來源

2013-10-17 07:42:23 nik

無法保留背景圖像

回答

相關問題