Html 具有透明度的 PNG 图像在所有浏览器中呈现为白色背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4738358/
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
PNG Image With Transparency Renders With White Background In All Browsers?
提问by mickburkejnr
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
我目前正在一个网站上工作，一个图像用作提交按钮的背景（当前按钮是普通的 HTML 按钮，但在开发时将更改为 asp:Button）。
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
另一位开发者指出，这个按钮似乎有一个白色的背景。认为图像未正确保存，我在 Fireworks 中打开它，PNG 图像具有透明背景。我再次导出图像，将其另存为 PNG-32 图像，然后用新图像覆盖原始图像。图像看起来仍然相同。
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
奇怪的是，这发生在 Chrome、Firefox 和 IE 7/8 中，页面上的其他图像也没有白色背景。
Also, I have checked the CSS and there are no styles that contain a white background colour element.
另外，我检查了 CSS 并且没有包含白色背景颜色元素的样式。
Any one got any ideas?
任何人有任何想法？
Many thanks!
非常感谢！
回答by mickburkejnr
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
由于该站点是在 ASP.NET 中构建的，因此无法将按钮更改为链接图像并在其上使用 JavaScript。
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
但是，在开发的 ASP.NET 站点上，也会出现此问题。但是我已经通过执行以下操作在 ASP.NET 中修复了它：
When calling the button, I've typed this out to begin with:
调用按钮时，我首先输入了以下内容：
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
添加参数 "BackColor="Transparent" 从按钮中删除白色背景。因此标签现在显示为：
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
这将删除 ASP.NET 中的白色背景。完全无法解释为什么按钮上有白色背景。虽然我已经读到使用 GIF 可以解决问题，但我还没有时间看看这是否属实。
EDIT (24/01/2010)
编辑 (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
我发现如何在 HTML 文档中解决这个问题，纯属偶然！
What you need to do, in the CSS you have to call the following:
你需要做什么，在CSS中你必须调用以下内容：
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
这将删除按钮背面的灰色/白色背景，并且还会删除按钮的边框。
回答by adamdunne
try adding
border: none;
to your button style.
尝试添加
border: none;
到您的按钮样式。
回答by plebksig
I think if you have already tried setting:
我想如果你已经尝试过设置：
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
诸如此类。然后你应该尝试将提交更改为只是一个带有图像的链接，并通过 javascript 调用它，我认为这是按钮类型。
Edit (20th Jan):I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything). If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
编辑（1 月 20 日）：我预计某些 ASP 会解决它（当 ASP 之类的东西必须干扰任何东西的布局时，我真的受不了）。如果您想为您的 HTML 版本解决此问题，我认为您应该提供一个链接或将其复制到小提琴中，因为可能很容易找出导致它的原因。我的赌注是一些您无法覆盖的继承风格。确定您没有在某些通用样式中使用 !important 或此类？
回答by stecb
It's kinda weird :D
有点奇怪:D
check this fiddleout ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image
检查这个小提琴......你可以尝试将你的图像的url设置为那个输入背景，看看会发生什么（如果它是公开的......或者你可以将它上传到imageshack），所以我们可以排除那个有问题特定图像
