CSS 我可以向 ASP.NET 按钮添加图像吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2510401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I add an image to an ASP.NET button?
提问by Blankman
I want to add an image, instead of the default button.
我想添加一个图像，而不是默认按钮。
I already have a CSS class for the image, will this work?
我已经有一个用于图像的 CSS 类，这行得通吗？
<asp:Button ID="..." CssClass=""/>
I am trying it now, and the image is all scrunched up. Maybe it's a CSS issue?
我现在正在尝试，图像都被压缩了。也许这是一个CSS问题？
回答by Tim S. Van Haren
Why not use an ImageButtoncontrol?
为什么不使用ImageButton控件？
回答by Josh Stodola
Although you can "replace" a button with an image using the following CSS...
尽管您可以使用以下 CSS 用图像“替换”按钮...
.className {
background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
border: 0;
height: 61px;
width: 250px
}
...the best thing to do here is use an ImageButton control because it will allow you to use alternate text (for accessibility).
...这里最好的做法是使用 ImageButton 控件，因为它允许您使用替代文本（为了可访问性）。
回答by Banzor
I actually prefer to use the html button form element and make it runat=server. The button element can hold other elements inside it. You can even add formatting inside it with span's or strong's. Here is an example:
我实际上更喜欢使用 html 按钮表单元素并将其设置为 runat=server。button 元素可以在其中包含其他元素。您甚至可以使用跨度或强在其中添加格式。下面是一个例子：
<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
回答by Chris
I dont know if I quite get what the issue is. You can add an image into the ASP button but it depends how its set up as to whether it fits in properly. putting in a background images to asp buttons regularly gives you a dodgy shaped button or a background image with a text overlay because its missing an image tag. such as the image with "SUBMIT QUERY" over the top of it.
我不知道我是否完全明白问题是什么。您可以将图像添加到 ASP 按钮中，但这取决于它的设置是否正确。定期将背景图像放入 asp 按钮会为您提供一个形状不规则的按钮或带有文本覆盖的背景图像，因为它缺少图像标签。例如顶部带有“提交查询”的图像。
As an easy way of doing it I use a "blankspace.gif" file across my website. its a 1x1 pixel blank gif file and I resize it to replace an image on the website.
作为一种简单的方法，我在我的网站上使用“blankspace.gif”文件。它是一个 1x1 像素的空白 gif 文件，我调整了它的大小以替换网站上的图像。
as I dont use CSS to replace an image I use CSS Sprites to reduce queries. My website was originally 150kb for the homepage and had about 140-150 requests to load the home page. By creating a sprite I killed off the requests compressed the image size to a fraction of the size and it works perfect and any of the areas you need an image file to size it up properly just use the same blankspace.gif image.
因为我不使用 CSS 来替换图像，所以我使用 CSS Sprites 来减少查询。我的网站最初是 150kb 的主页，并且有大约 140-150 个请求来加载主页。通过创建一个精灵，我取消了将图像大小压缩到一小部分大小的请求，它可以完美运行，并且您需要图像文件来正确调整大小的任何区域只需使用相同的 blankspace.gif 图像。
<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /
If you see the above the class loads the background image in the css but this leaves the button with the "submit Query" text over it as it needs an image so replacing it with a preloaded image means you got rid of the request and still have the image in the css.
如果您看到上面的内容，该类会在 css 中加载背景图像，但这会在按钮上留下“提交查询”文本，因为它需要图像，因此将其替换为预加载的图像意味着您摆脱了请求并且仍然有css中的图像。
Done.
完毕。
回答by Mahmut EFE
You can add image to asp.net button. you dont need to use only image button or link button. When displaying button on browser, it is converting to html button as default. So you can use its "Style" properties for adding image. My example is below. I hope it works for you.
您可以将图像添加到 asp.net 按钮。您不需要只使用图像按钮或链接按钮。当在浏览器上显示按钮时，它默认转换为 html 按钮。所以你可以使用它的“样式”属性来添加图像。我的例子如下。我希望这个对你有用。
Style="background-image:url('Image/1.png');"
You can change image location with using
您可以使用更改图像位置
background-repeat
properties. So you can write a button like below:
特性。所以你可以写一个像下面这样的按钮：
<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>
回答by Mahmut EFE
.my_btn{
font-family:Arial;
font-size:10pt;
font-weight:normal;
height:30px;
line-height:30px;
width:98px;
border:0px;
background-image:url('../Images/menu_image.png');
cursor:pointer;
}
<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />
回答by Armstrongest
Assuming a Css class of "image" :
假设一个“图像”的 CSS 类：
input.image {
background: url(/i/bg.png) no-repeat top left;
width: /* img-width */;
height: /* img-height */
}
If you don't know what the image width and height are, you can set this dynamically with javascript.
如果您不知道图像的宽度和高度是多少，您可以使用 javascript 动态设置它。
