的CSS背景圖片問題 <select>和<option>

Question

的HTML

<select data-val="true"  id="GameID" >
   <option value="">Select Game...</option>
   <option value="4">Counter Strike Source</option>
   <option value="5">Medal Of Honor</option>
   <option value="6">NFS Shift</option>
</select>

的CSS

select
{
    color: #fff;
    background: url(/img/backgrounds/tab-hover-background.png) rgba(0,0,0,0); 
    border: 1px solid #8093BE;
    width: 242px;
    height: 20px;   
}

option
{
    background: url(/img/backgrounds/tab-hover-background.png) rgba(0,0,0,0); 
}

• 在Firefox中工作正常，
• 在Opera中，它僅適用於選擇，不適用於選項
• 在IE 9.0和Chrome中，它具有奇怪的行為
  我希望所有瀏覽器都像Firefox一樣顯示

這是一個來源

Answer 1

改變表單元素的樣式並不是那么容易。每個瀏覽器都有自己的呈現和創建這些元素的方式 。 有些瀏覽器會接受您選擇的背景圖片，有些則不會。

一種簡單的技術是添加默認顏色，因此瀏覽器無法渲染圖像時將渲染該顏色。

background: #c3c3c3 url(http://www.3dtuning.ru/img/design/gallery-back.png) repeat-x 0 0;

因此，Firefox的用戶將看到背景圖像（在我看來，這種圖像看上去總是難看的），其余的瀏覽器將顯示為灰色背景。

希望這可以幫助

Answer 2

就像之前的文章一樣：顏色位於圖片網址之前。 最好使用單詞“ transparent”代替rgba（0,0,0,0），因為那樣會更好地兼容。

Answer 3

您的alpha透明度在RGBa值中設置為0，這意味着它將完全透明/不可見，需要將其設置為1才能使其可見。

另外，您需要將RGBa值放在url('image.jpg') 。