Question

可能重复：
Text on an Image button in c# asp.net 3.5

我想要一个asp.net按钮，左边有文字，右边是图片

Answer 1

这是我写的：

public class WebImageButton : LinkButton, IButtonControl
{
    protected override void OnPreRender(EventArgs e)
    {
        if (!this.DesignMode)
        {
            // Apply the image
            if (this.Image.Length > 0)
            {
                this.Style.Add("background-image", "url(" + this.Image + ")");
                this.Style.Add("background-repeat", "no-repeat");
                this.Style.Add("background-position", this.ImageHorizontalOffset + " " + this.ImageVerticalOffset);
            }
        }

        base.OnPreRender(e);
    }

    [DescriptionAttribute("The path to the default image to be displayed.")]
    public string Image
    {
        get
        {
            if (_image == null)
            {
                return string.Empty;
            }
            return _image;
        }
        set
        {
            _image = value;
        }
    }
    private string _image;

    [DescriptionAttribute("The unit to offset the image by horizontally.")]
    public string ImageHorizontalOffset
    {
        get
        {
            return _imageHorizontalOffset;
        }
        set
        {
            _imageHorizontalOffset = value;
        }
    }
    private string _imageHorizontalOffset = "0px";

    [DescriptionAttribute("The unit to offset the image by vertically.")]
    public string ImageVerticalOffset
    {
        get
        {
            return _imageVerticalOffset;
        }
        set
        {
            _imageVerticalOffset = value;
        }
    }
    private string _imageVerticalOffset = "center";

}

然后是随附的CSS：

.ImageButton
{
    background:#666;
    border:solid 1px #000;
    color:#FFF;
    font-size:10pt;
    font-weight:bold;
    padding:4px;
    text-align:center;
    cursor:hand;
}

使用它的一个例子：

<ctrl:WebImageButton ID="WebImageButton1" runat="server"
    OnClick="WebImageButton1_Click" CssClass="ImageButton" Text="Click me" 
    ImageHorizontalOffset="4px" />

Answer 2

您可以使用CSS将图像应用于input元素的背景。在background-image CSS方法中阅读：

http://www.w3schools.com/css/pr_background-image.asp

Answer 3

我不确定是否有任何asp控件允许你这样做（但我可能是错的）。你想要愚弄的可能是div和他们的onclick事件。然后你可以做onclick="Javascript:this.form.submit();"之类的事情。您可以根据需要调整div的大小并插入您想要的内容（在您的案例中为文本和图像）。

编辑：然后在css中你还可以添加#mydiv:hover { cursor: pointer; }当用户将光标移到div上时获取手形图标。

但看起来gage提供了某人解决方案的链接：P祝你好运

带图像和文本的按钮

3 个答案: