我可以在提交按钮上使用csssprite [英] Can I use a csssprite on a submit button

问题描述

我有两个理由要使用 csssprites 提交按钮：

• 我已动态创建按钮，以后可能会本地化


• 我在页面上有5个按钮

问题是我想避免使用javascript的按钮，因此我需要使用输入字段类型 image 。我可以设置背景图像在这个字段就像我想为任何csssprite。

问题是，我发现我必须将图片来源设置为空像素，否则我会得到一个损坏的图标。

有了这个说法，这是我想出的最好的解决方案：

 < style& 
 .csssprite_cat {
 background-image：url（http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg）; width：50px; 
 height：50px; 
} 
< / style> 
 
< input type = image src =http://www.grasse-ac.com/gif/no_pixel.gifclass =csssprite_cat> 
< input type = image class =csssprite_cat> 
  

（您可以直接将此文件加载到浏览器中 - 。

它可以工作，但我必须使用我们好的老朋友 pixel.gif 。非常怀旧！

没有javascript可能没有更好的方法，除非有一种方法在css隐藏破碎的图像文字和图标。

解决方案

不要使用图像输入类型，你最好使用bog标准提交按钮和样式。 >

定义 background-image 后，您需要定义唯一的

对于向后兼容性，我建议使用类混合（因为现在IE仍然没有不支持CSS3属性选择器），如下所示：

 < input type =submitclass =submit uniqueButtonClassvalue =提交/> 
  

如果您给予 .submit background-image 属性，您可以为每个单独的按钮独立设置 background-position 属性，

例如：

  .submit {background- image：url（path / to / image.png）; width：50px; height：25px; border：0; } 
 / *假设25px是你使用的偏移量* / 
 .uniqueButtonClass {background-position：0 25px; } 
  

I have two reasons I want to use csssprites for submit buttons :

• I have dynamically created button, which in the future might be localized
• I want just 1 HTTP request even if I have 5 buttons on the page

The problem is that I want to avoid javascript for buttons, and therefore I need to use an input field of type image. I can set the background image on this field just as i would for any csssprite.

The problem is that I found I had to set the image source to an empty pixel or else I get a broken image icon.

With that said, this is the best solution I have come up with :

<style>
    .csssprite_cat {
        background-image:url(http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg); width: 50px;
        height: 50px;
    }
</style>

<input type=image src="http://www.grasse-ac.com/gif/no_pixel.gif" class="csssprite_cat">
<input type=image class="csssprite_cat">

(You can just load this file directly into a browser - i am borrowing images from a random site).

It works kind of OK, but I have to use our good old friend pixel.gif. Very nostalgic!

There probably isn't a better way without javascript, unless there is a way in css to hide the broken image text and icon.

解决方案

Don't use the image input type, you're much better off using a bog standard submit button and styling it that way.

Once you have defined your background-image, you'll need to define unique background-positions for each different button you'd like to use.

For backwards compatibility I would advise using class mixtures (since as of now IE still doesn't support CSS3 attribute selectors), like so:

<input type="submit" class="submit uniqueButtonClass" value="Submit" />

If you give the .submit class the background-image property, you can set the background-position property independently for each individual button, and avoid having to repeat yourself several times.

Example:

.submit { background-image: url(path/to/image.png); width: 50px; height: 25px; border: 0; }
/* assuming 25px is the offset you're using */
.uniqueButtonClass { background-position: 0 25px; }

这篇关于我可以在提交按钮上使用csssprite的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！