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

Question

我想使用 csssprites 作为提交按钮有两个原因：

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

问题是我想避免按钮使用 javascript，因此我需要使用 input 字段输入图像。 我可以在这个字段上设置背景图像，就像我为任何 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

不要使用图像输入类型，最好使用沼泽标准提交按钮并以这种方式设置样式。

定义背景图像后，您需要为要使用的每个不同按钮定义唯一的背景位置。

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

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

如果您为 .submit 类提供 background-image< /code> 属性，您可以为每个单独的按钮独立设置 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>

按钮标签允许您在其中添加几乎所有内容，并允许更好地控制格式。

在这种情况下，您可以在按钮内或按钮本身设置跨度的样式。