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中，它仅适用于select，但不适用于选项
在IE 9.0＆amp; Chrome它有一个奇怪的行为
我希望所有浏览器都能像Firefox一样显示

this是来源

Answer 1

改变表单元素的风格并不容易..每个浏览器都有own way to render and create those elements。有些浏览器会接受在您的选择中包含背景图像，而其他浏览器则不会。

一种简单的技术是添加默认颜色，因此如果浏览器无法渲染图像，浏览器将呈现颜色。

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

所以这样，firefox用户会看到一个背景图片（在我看来总是看起来很难看），其余浏览器会以灰色背景显示。

希望这有帮助

Answer 2

您的Alpha透明度在RGBa值中设置为0，这意味着它将完全透明/不可见，需要将其设置为1才能显示。

此外，您需要将RGBa值放在url('image.jpg')之前。

Answer 3

与上一篇文章一样：颜色出现在图片网址之前。而不是rgba（0,0,0,0），你最好使用“透明”这个词，因为它会更好地兼容。

<select>＆amp;的CSS背景图片问题<选项> </选项> </选择>

3 个答案: