Html <select> 和 <option> 的 CSS 背景图像问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7385490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background-image issue for <select> & <option>
提问by Artur Keyan
HTML
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
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);
}
- In Firefox it works fine,
- In Opera it works only for select,but not for option
- In IE 9.0 & Chrome it has a strange behavior
I want all browsers to display like Firefox
- 在 Firefox 中它工作正常，
- 在 Opera 中，它仅适用于选择，但不适用于选项
- 在 IE 9.0 和 Chrome 中，它有一个奇怪的行为，
我希望所有浏览器都像 Firefox 一样显示
thisis a source
这是一个来源
回答by pleasedontbelong
Its not that easy to change form element's style.. each browser has it's own way to render and create those elements. Some browsers will accept having a background image inside your select, others won't.
改变表单元素的样式并不是那么容易。每个浏览器都有自己的方式来呈现和创建这些元素。某些浏览器会接受在您的选择中包含背景图像，而其他浏览器则不会。
A simple technique is to add a default color, so the browser will render the color if it cant render the image.
一种简单的技术是添加默认颜色，这样浏览器在无法渲染图像时会渲染颜色。
background: #c3c3c3 url(http://www.3dtuning.ru/img/design/gallery-back.png) repeat-x 0 0;
so this way, firefox users will see a background image (something that always looks ugly, in my opinion) and the rest of the browsers will display with a gray background.
这样，firefox 用户将看到背景图像（在我看来，它总是看起来很难看），而其余浏览器将显示为灰色背景。
Hope this helps
希望这可以帮助
回答by no.
Your alpha transparency is set to 0 in the RGBavalues, this means that it will be completely transparent/not visible, this needs to be set to 1 for it to be visible.
您的 alpha 透明度在RGBa值中设置为 0 ，这意味着它将完全透明/不可见，需要将其设置为 1 才能可见。
Also, you need to put your RGBavalue before the url('image.jpg').
此外，您需要将您的RGBa价值放在url('image.jpg').
回答by Leo
Like the previous post: color comes before image url. in stead of rgba(0,0,0,0) you better use the word "transparent", as that would be better compatible.
就像上一篇文章：颜色在图像 url 之前。而不是 rgba(0,0,0,0) 你最好使用“透明”这个词，因为这样会更好地兼容。
