我可以使用csssprite上一个提交按钮(Can I use a csssprite on a s

我有两个原因，我想用csssprites的提交按钮：

• 我已动态创建按钮，这在未来可能会进行本地化
• 我想只有1 HTTP请求，即使我在网页上有5个按钮

的问题是，我想避免为按钮的JavaScript，因此，我需要使用一个input类型的字段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.gif" class="csssprite_cat">
<input type=image class="csssprite_cat">

（您可以将此文件只是直接加载到浏览器中 - 我是从一个随机的网站借用图像）。

它的工作原理样OK的，但我必须用我们的老朋友pixel.gif 。 很怀旧！

有可能是没有的JavaScript更好的办法，除非有CSS的方式来隐藏断开的图像文本和图标。

Answer 1:

不要使用图像输入类型，你好得多使用沼泽标准提交按钮，造型这种方式。

一旦你已经确定你的background-image ，你需要定义独特的background-positions对每个不同的按钮，你想使用。

为了向后兼容我建议使用类的混合物（因为截至目前IE仍然不支持CSS3属性选择器），如下所示：

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

如果你给.submit类的background-image属性，你可以设置background-position为每个单独的按钮独立财产，并避免重复自己几次。

例：

.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; }

Answer 2:

我会使用一个输入型如上，或者你也可以：

<button><img src="http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg" /></button>

该按钮标签可以让你几乎在扔任何东西，并允许在格式化更大的控制权。

在这种情况下，你可以样式的按钮或它的自我按钮内的跨度。

文章来源: Can I use a csssprite on a submit button