我有一个图像按钮。我想在其上添加一个“搜索”文本。我无法添加它,因为VS 2008中的“imagebutton”属性中没有文本控件。谁能告诉我如何将文字添加到图像按钮?
<asp:ImageButton ID="Searchbutton" runat="server" AlternateText="Search"
CssClass="bluebutton"
ImageUrl="../Graphics/bluebutton.gif" Width="110px"
onclick="Searchbutton_Click"/>
答案 0 :(得分:20)
<button runat="server"
style="background-image:url('/Content/Img/stackoverflow-logo-250.png')" >
your text here<br/>and some more<br/><br/> and some more ....
</button>
答案 1 :(得分:6)
ImageButton
无法做到这一点。
但是,您可以使用简单的Button
,设置文本,并使用CSS添加背景图像(bluebutton.gif)以获得所需的效果。
答案 2 :(得分:6)
dotnetslave.com的这个提示为我工作:
<asp:LinkButton
CssClass="lnkSubmit"
ID="lnkButton"
runat="server">SUBMIT</asp:LinkButton>
a.lnkSubmit:active
{
margin:0px 0px 0px 0px;
background:url(../../images/li_bg1.jpg) left center no-repeat;
padding: 0em 1.2em;
font: 8pt "tahoma";
color: #336699;
text-decoration: none;
font-weight: normal;
letter-spacing: 0px;
}
答案 3 :(得分:1)
无法在图像按钮内添加文本。我也面临同样的问题。我的解决方案是使用链接按钮而不是图像按钮。只需在样式标记中添加图像即可。
答案 4 :(得分:0)
我认为您不能将文本写入ASP.NET的ImageButton控件。你可以动态生成图像,如果这是你需要的,并从你的代码后面写下文本,但它会太复杂,而是使用带有CSS的普通按钮,除非你的图像不能由CSS生成。
答案 5 :(得分:0)
您也可以使用asp:Label执行此操作,如下所示:
<style type="text/css">
.faux-button
{
cursor:pointer;
}
</style>
<div class="faux-button">
<asp:ImageButton ID="ibtnAddUser"
runat="server"
ImageUrl="~/Images/add.gif"
AlternateText="Add a user image" />
<asp:Label ID="lblAddUser"
runat="server"
Text="Add User"
AssociatedControlID="imgClick" />
</div>
答案 6 :(得分:0)
我意识到这是一个老帖子,但我最近为自己解决了同样的问题。
我创建了一个ImgButton服务器控件来呈现它:
<button> <img src="button_icon.png" /> Caption Text </button>
使用CSS设置背景图片的样式有一些缺点,主要是:
我会尝试在这里插入代码,但也有完整的源代码和示例: Button with Img tag and Caption Text
ImgButton.cs:
[DefaultProperty("Text")]
[DefaultEvent("Click")]
[ToolboxData("<{0}:ImgButton runat=server></{0}:ImgButton>")]
public class ImgButton : WebControl, IPostBackEventHandler
{
#region Public Properties
public enum ImgButtonStyle
{
Button,
Anchor
}
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public string Text
{
get
{
String s = (String)ViewState["Text"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["Text"] = value;
}
}
[EditorAttribute(typeof(System.Web.UI.Design.ImageUrlEditor), typeof(UITypeEditor))]
public string ImgSrc { get; set; }
public string CommandName { get; set; }
public string CommandArgument { get; set; }
[EditorAttribute(typeof(System.Web.UI.Design.UrlEditor), typeof(UITypeEditor))]
public string NavigateUrl { get; set; }
public string OnClientClick { get; set; }
public ImgButtonStyle RenderStyle { get; set; }
[DefaultValue(true)]
public bool UseSubmitBehavior { get; set; }
[DefaultValue(true)]
public bool CausesValidation { get; set; }
public string ValidationGroup { get; set; }
[DefaultValue(0)]
public int Tag { get; set; }
#endregion
#region Constructor
public ImgButton()
{
Text = "Text";
ImgSrc = "~/Masters/_default/img/action-help.png";
UseSubmitBehavior = true;
CausesValidation = true;
}
#endregion
#region Events
// Defines the Click event.
public event EventHandler Click;
public event CommandEventHandler Command;
protected virtual void OnClick(EventArgs e)
{
if (Click != null)
{
Click(this, e);
}
}
protected virtual void OnCommand(CommandEventArgs e)
{
if (Command != null)
{
Command(this, e);
}
RaiseBubbleEvent(this, e);
}
public void RaisePostBackEvent(string eventArgument)
{
if (CausesValidation)
{
Page.Validate(ValidationGroup);
if (!Page.IsValid) return;
}
OnClick(EventArgs.Empty);
if (!String.IsNullOrEmpty(CommandName))
OnCommand(new CommandEventArgs(CommandName, CommandArgument));
}
#endregion
#region Rendering
// Do not wrap in <span> tag
public override void RenderBeginTag(HtmlTextWriter writer)
{
writer.Write("");
}
protected override void RenderContents(HtmlTextWriter output)
{
string click;
string disabled = (Enabled ? "" : "disabled ");
string type = (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior ? "submit" : "button");
string imgsrc = ResolveUrl(ImgSrc ?? "");
if (String.IsNullOrEmpty(NavigateUrl))
click = Page.ClientScript.GetPostBackEventReference(this, "");
else
if (NavigateUrl != null)
click = String.Format("location.href='{0}'", ResolveUrl(NavigateUrl));
else
click = OnClientClick;
switch (RenderStyle)
{
case ImgButtonStyle.Button:
if (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior)
{
output.Write(String.Format(
"<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" title=\"{5}\"><img src=\"{6}\" alt=\"{5}\"/>{7}</button>",
ClientID,
disabled,
CssClass,
type,
UniqueID,
ToolTip,
imgsrc,
Text
));
}
else
{
output.Write(String.Format(
"<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" onclick=\"javascript:{5}\" title=\"{6}\"><img src=\"{7}\" alt=\"{6}\"/>{8}</button>",
ClientID,
disabled,
CssClass,
type,
UniqueID,
click,
ToolTip,
imgsrc,
Text
));
}
break;
case ImgButtonStyle.Anchor:
output.Write(String.Format(
"<a id=\"{0}\" {1}class=\"{2}\" onclick=\"javascript:{3}\" title=\"{4}\"><img src=\"{5}\" alt=\"{4}\"/>{6}</a>",
ID,
disabled,
CssClass,
click,
ToolTip,
imgsrc,
Text
));
break;
}
}
public override void RenderEndTag(HtmlTextWriter writer)
{
writer.Write("");
}
#endregion
}
这是我在我的按钮上使用的CSS(我将“icon”放在按钮的CssClass属性中):
button.icon
{
cursor: pointer;
}
button.icon img
{
margin: 0px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
}
答案 7 :(得分:0)
如果使用“链接”按钮,则可以添加引导按钮,然后通过CSS&#34;&#34;之后添加文本。属性。
<强>的LinkButton:强>
<asp:LinkButton id="download" CssClass="btn btn-primary" Text="Download" OnCommand="OnButtonClick" CommandName="Download" runat="server">
<span aria-hidden="true" class="glyphicon glyphicon-download-alt"></span></asp:LinkButton>
<强> CSS:强>
#MainContent_download:after{
content: "Download";
padding-left: 5px;
}
答案 8 :(得分:0)
我更喜欢以下解决方案:
<div style="padding: 5px; float: left;overflow: auto;height: auto;">
<asp:ImageButton ID="ImageButton2" ImageUrl="./icons/search24.png" ToolTip="Search" runat="server" />
<p><asp:Label ID="Label7" runat="server" Text="Search"></asp:Label></p>
</div>
您可以更改style
使其居中对齐,等等。