Question

我有两个原因要使用csssprites提交按钮：

我有动态创建的按钮，将来可能会被本地化
即使页面上有5个按钮，我也只想要1个HTTP请求

问题是我想避免使用按钮的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">

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

它有点好，但我必须使用我们的老朋友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>

button tag允许你在其中抛出任何东西，并允许更好地控制格式化。

在这种情况下，你可以在按钮内部设置一个范围或者它自己的按钮。

我可以在提交按钮上使用csssprite吗？

2 个答案: