我正在寻找一种解决方案,我将能够在 asp.net 按钮中添加图像和文本。
<asp:Button ID="Button1" runat="server" Text="Button"/>
我只能为按钮指定文本,但我怎样才能添加图像呢?
默认情况下,ASP .Net 没有可以同时呈现图像和文本的按钮。但是,您可以通过两种方式实现。
我更喜欢 CSS,因为它重量轻,而且你可以随意设置样式。
<style type="text/css">
.submit {
border: 1px solid #563d7c;
border-radius: 5px;
color: white;
padding: 5px 10px 5px 25px;
background: url(https://i.stack.imgur.com/jDCI4.png)
left 3px top 5px no-repeat #563d7c;
}
</style>
<asp:Button runat="server" ID="Button1" Text="Submit" CssClass="submit" />
它开箱即用。但是,您不能轻易改变他们的风格。
使用Telerik RadButton等第三方控件。
最后但并非最不重要的一点是,如果您愿意,您可以自己实现自定义服务器控件。
这是一个简单的解决方案,对我有用:
<asp:LinkButton runat="server" ID="btnRun" Text="<i class='fa fa-home'></i> Search"
CssClass="btn-success" />
这是一个简单的解决方案,对我有用:
<asp:LinkButton ID="ClickMe" runat="server" Text="Click Me" OnClick="ClickMe_Click" style="text-decoration: none; color: #505050;">
<asp:Image runat="server" ImageUrl="/Resources/Bitmaps/excel_24.png" style="margin-left:5px;" />
</asp:LinkButton>
您还可以使用字体图标代替图像。
CSS
.button {
min-width:175px;
border-radius:50px;
background:none;
outline:none;
border:none;
color:#fff;
padding:15px 25px;
margin-top:10px;
background: rgba(115,84,178,1);
background: -moz-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(115,84,178,1)), color-stop(34%, rgba(115,84,178,0.95)), color-stop(35%, rgba(115,84,178,0.95)), color-stop(62%, rgba(96,107,192,0.91)), color-stop(100%, rgba(84,160,231,0.85)));
background: -webkit-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: -o-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: -ms-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7354b2', endColorstr='#54a0e7', GradientType=1 );
}
您可以在上述样式中删除类中的background
andfilter
部分。button
我只是将它用于按钮的渐变背景。
HTML
<button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
<i class="fa fa-download" style="font-size:20px;float:left;"></i> DOWNLOAD
</button>
按钮如下所示。
甚至您可以通过添加颜色来更改图标颜色<i>...</i>
。像下面的东西。
<button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
<i class="fa fa-download" style="font-size:20px;float:left;color:#ff4444;"></i>
DOWNLOAD
</button>