【问题标题】:PNG Image With Transparency Renders With White Background In All Browsers?具有透明度的PNG图像在所有浏览器中呈现白色背景?
【发布时间】:2019-09-04 20:10:10
【问题描述】:

我目前正在开发一个网站,并使用一个图像作为提交按钮的背景(当前该按钮是普通的 HTML 按钮,但在开发时将更改为 asp:Button)。

另一位开发人员指出,此按钮似乎有白色背景。认为图像没有正确保存,我在 Fireworks 中打开它,PNG 图像具有透明背景。我再次导出图像,将其保存为 PNG-32 图像,并用新图像覆盖原始图像。图像看起来仍然一样。

奇怪的是,这发生在 Chrome、Firefox 和 IE 7/8 中,并且页面上的其他图像也没有白色背景。

另外,我检查了 CSS 并且没有包含白色背景颜色元素的样式。

有人有什么想法吗?

非常感谢!

【问题讨论】:

  • 您是否尝试将此图像放在页面的其他位置以检查背景是否在图像上,而不是在可应用于您的按钮的所有 css 层中?

标签: html css png


【解决方案1】:

由于网站是在 ASP.NET 中构建的,因此无法将按钮更改为链接图像并在其上使用 JavaScript。

但是,在已开发的 ASP.NET 站点上,也会出现此问题。但我已经设法通过执行以下操作在 ASP.NET 中修复它:

在调用按钮时,我首先输入了以下内容:

<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />

添加参数“BackColor="Transparent" 会移除按钮的白色背景。因此标签现在显示为:

<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />

这将删除 ASP.NET 中的白色背景。完全无法解释为什么按钮上有白色背景。虽然我读过使用 GIF 可以解决问题,但我没有时间看看这是否正确。

编辑(2010 年 1 月 24 日)

我偶然发现了如何在 HTML 文档中解决这个问题!

你需要做的,在CSS中你必须调用如下:

background-color: transparent;
border: none;

这会移除按钮背面的灰/白背景,同时也会移除按钮的边框。

【讨论】:

    【解决方案2】:

    尝试添加 border: none; 到您的按钮样式。

    【讨论】:

    • 为什么border:none应该修复一些背景或图像相关的问题??
    • 嗨,我添加了边框:无;没有欢乐的风格。
    【解决方案3】:

    我想如果你已经尝试过设置:

    submit{background:none;}
    

    等等。然后你应该尝试将提交更改为只是一个带有图像的链接,并通过 javascript 调用它,我认为它是按钮类型。

    编辑(1 月 20 日): 我希望一些 ASP 会解决它(当 ASP 之类的东西必须干扰任何东西的布局时,我真的无法忍受)。 如果您想为您的 HTML 版本解决此问题,我认为您应该提供一个链接或将其复制到小提琴中,因为很容易找出导致它的原因。我的赌注是一些你不能覆盖的继承风格。确定您没有在某些通用样式中使用 !important 等?

    【讨论】:

    • 检查我的小提琴..问题不在于按钮类型!!
    • 既然他提到了 ASP,我会 100% 确定它不会首先干扰类型。在为 JSP 开发人员做事时,我也遇到过类似的问题。但他也应该尝试你的建议。
    【解决方案4】:

    这有点奇怪:D

    check this fiddle out ..您可以尝试将图像的 url 设置为该输入背景,然后看看会发生什么(如果它是公开的..或者您可以将其上传到 imageshack 上),因此我们可以排除存在该特定图像的问题

    【讨论】:

    • 感谢您的提琴,但在处理此类事情时我倾向于避免使用 javascript。
    • @mickburkejnr 确实,小提琴里面没有 javascript :) ..我用它只是为了向您展示 html+css 示例 ;)
    • 这就是链接作为答案不好的原因。小提琴是一个死链接。
    猜你喜欢
    • 2018-10-31
    • 1970-01-01
    • 2015-10-21
    • 2021-03-28
    • 1970-01-01
    • 2015-02-03
    • 2016-12-29
    • 2012-12-19
    • 1970-01-01
    相关资源
    最近更新 更多