ASP.Net 按钮不会呈现背景图像

Posted 2023-03-05

【中文标题】ASP.Net 按钮不会呈现背景图像

【英文标题】：ASP.Net button won't render background-image

【发布时间】：2013-08-10 21:34:53

【问题描述】：

我已经在此处以及 asp.net 论坛中检查了有关此主题的大多数链接问题，但我被卡住了。我的一个 .aspx 页面中有以下内容：

<asp:button ID="btnAdmin" runat="server" Width="70px" Height="30px"
     Text="Admin" 
     ToolTip="Facilities for administrators" 
     CssClass="buttonStyleAdmin">
</asp:button>

我的 .css 文件中有以下内容：

.buttonStyleAdmin

background-color: transparent;
background-image: url('imgBlue-button-base.png');
font-size: 1.0em;
cursor: pointer;

我了解 url 语法应该与 CSS 文件的位置相关。尝试了一些url指向web的images目录后，我放弃了，将上面的.png文件复制到web的根目录下；也就是说，它与 .css 文件本身相邻。

我在 Firefox 中使用过 Google 开发者工具和 Firebug，匹配的 CSS 规则似乎是正确的。也就是说，我可以将鼠标悬停在工具的部分上，然后 URL 会解析，从而显示图像本身。

这是渲染页面的 Firebug 视图：

如果我可以使用网站根目录中的 .png 文件和 .css 文件来解决此问题，那么我想更改对收集所有其他图像的图像文件夹的引用，但使用网络根目录中的两个文件都失败了，我显然需要一些关于可能出错的建议。 我在运行 .Net Framework 3.5 (Windows Server 2003) 的网络服务器上使用 Visual Studio 2008。

【参考方案1】：

试试看

display: block;
background-position: 0px 0px;

进入 .buttonStyleAdmin。

我将您的代码/css 放入一个空白项目中，它与占位符图像配合得很好。

如果您有广告拦截功能，请尝试将其关闭。如果您尝试了上述方法，但您没有说明您在其他案例/ASP 论坛中已经尝试过的内容，请致歉。

【讨论】：

感谢您的想法。我试过了，没有真正的改变（除了按钮本身的重新定位）。图像仍未呈现为 控件的背景。我从来没有听说过adblock，但搜索后，我认为我没有。如果它是 Chrome 扩展程序，我没有。与火狐一样。简而言之，我认为我没有广告拦截。谢谢你的关注。任何其他想法。根据我向您展示的内容，我认为您认为它应该有效，对吗？

是的，据我所知，我将您的确切代码放入 VS 中，效果很好。图片按钮对你有用吗？

据我所知，我使用的是 Visual Studio 2008，因此使用的是 CSS 2.0。你的VS一样吗？

我在 .net 3.5 项目中使用了 VS2010。您是否尝试过使用其中之一来代替 w3schools.com/aspnet/control_imagebutton.asp ？

【参考方案2】：

这是我想出的有效方法：

<asp:button id="btnAdmin" runat="server" 
    Text="Admin"
    ToolTip="Facilities for administrators"
    CssClass="coolbutton">
</asp:button>

还有 CSS：

.coolbutton

-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url(images/imgBlue-button-base.jpg);
background-position: center;
color: White; 
cursor:pointer;

.coolbutton:hover 

-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url(images/imgBlue-button-baseOn.jpg);
background-position: center;
color: Black; 
cursor:pointer;