通过 css 类分配 ASP.net 按钮图像答案

【问题标题】：Assign ASP.net Button image via css class通过 css 类分配 ASP.net 按钮图像
【发布时间】：2011-07-03 21:57:43
【问题描述】：

我知道我可以使用 imagebutton 作为图像按钮。但我想使用 css sprites 来减少下载的图像数量。所以我想通过css类将普通按钮分配给图像。但是好像不行。

这是我尝试的代码和图像

按钮代码

    <asp:Button ID="btn1" CssClass="filter-tr" runat="server" />
<br />
<br />
<br />
<asp:Button ID="Button2" CssClass="filter-en" runat="server" />
<br />
<br />
<br />
<asp:Button ID="Button3" CssClass="flying" runat="server" />
<br />
<br />
<br />
<asp:Button ID="Button1" CssClass="fire" runat="server" />

这里是css类代码

    .filter-tr, .filter-en, .flying, .fire
{ display: block; background: url('images/image1.png') no-repeat; }

filter-tr { background-position: -0px -0px; width: 60px; height: 25px; }
filter-en { background-position: -0px -25px; width: 60px; height: 25px; }
flying { background-position: -0px -50px; width: 44px; height: 16px; }
fire { background-position: -0px -66px; width: 44px; height: 16px; }

但是这样就可以了

.filter-tr {  display: block; background: url('images/image1.png') no-repeat;  background-position: -0px -0px; width: 60px; height: 25px; border-width:0px; }

【问题讨论】：

css 和 images 文件夹在您的目录结构中的什么位置？
在什么情况下不工作？
图片url没有问题，或者包含我试过的css。还更新了第一个问题

标签： c# asp.net css class button

【解决方案1】：

我要做的第一件事是将背景 URL 设置为使用绝对位置：

.filter-tr, .filter-en, .flying, .fire
{ display: block; background: url('/images/image1.png') no-repeat; }

没有更多信息，我能提供的帮助就这些了。

编辑以前应该注意到的。类名前都需要有.：

.filter-tr { background-position: -0px -0px; width: 60px; height: 25px; }
.filter-en { background-position: -0px -25px; width: 60px; height: 25px; }
.flying { background-position: -0px -50px; width: 44px; height: 16px; }
.fire { background-position: -0px -66px; width: 44px; height: 16px; }

【讨论】：

图片url没有问题，或者包含我试过的css。还更新了第一个问题

【解决方案2】：

这行得通

.filter-tr
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -0px;
        width: 60px;
        height: 25px;
    }
    .filter-en
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -25px;
        width: 60px;
        height: 25px;
    }
    .flying
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -50px;
        width: 44px;
        height: 16px;
    }
    .fire
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -66px;
        width: 44px;
        height: 16px;
    }

【讨论】：