如何在CSS按鈕中將懸停效果顯示爲背景圖片？

Question

我有一個CSS3漸變按鈕，我試圖在我的按鈕內部顯示一個背景圖像（精確的小徑向發光）作爲懸停狀態。由於我的按鈕正常狀態已經佔用了「背景」標記，因此當我將懸停中的背景圖像鏈接起來時，CSS3漸變效果在我懸停時消失了。我嘗試使用背景圖片標籤進行懸停，但沒有奏效。

有沒有一種方法可以將懸停的背景圖像顯示在正常狀態的頂部？

CSS：

.submit { 
    background: rgb(254,219,130); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(254,219,130,1) 0%, rgba(255,183,50,1) 24%, rgba(255,164,10,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,219,130,1)), color-stop(24%,rgba(255,183,50,1)), color-stop(100%,rgba(255,164,10,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedb82', endColorstr='#ffa40a',GradientType=0); /* IE6-9 */ 
} 

.submit:hover { 
    background-image: url(images/glow.png) center no-repeat; 
} 

HTML：

<button class="submit">Button</button> 

Answer 1

不像input元件，所述button元件可以包含其他元素，所以最簡單的方法是簡單地嵌套button內的span並應用該發光元件的'發光'：

<button class="submit"><span>Button</span></button>​ 

.submit:hover span { 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1); 
}​ 

JS Fiddle demo。

我沒有訪問您自己的圖像，所以我用a CSS gradient image generator作爲替代。顯然，替代背在自己的相關圖片

---

使用第二background-image：

引入CSS3的，元素可以用逗號分隔的列表中的多個背景（如，例如，所述font-face聲明），其允許進行以下：

.submit:hover { 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), -moz-linear-gradient(top, rgba(254,219,130,1) 0%, rgba(255,183,50,1) 24%, rgba(255,164,10,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,219,130,1)), color-stop(24%,rgba(255,183,50,1)), color-stop(100%,rgba(255,164,10,1))); /* Chrome,Safari4+ */ 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -webkit-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -o-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Opera 12+ */ 
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -ms-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* IE10+ */ 
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), linear-gradient(to bottom, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1); /* IE6-8 fallback on horizontal gradient */ 
}​ 

JS Fiddle demo。

我還沒有定義filter屬性下的第二個背景，因爲我真的不知道微軟的舊瀏覽器是否會理解第二個值，或者只是放棄整個規則。