1

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

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

问题是我想避免 javascript 用于按钮，因此我需要使用inputtype 的字段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 中有一种方法可以隐藏损坏的图像文本和图标。

4

2 回答 2

4

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

一旦你定义了你的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; }
于 2009-07-16T20:22:38.073 回答
1

我会使用上述输入类型，或者您也可以：

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

按钮标签允许您在其中几乎扔任何东西，并允许更好地控制格式。

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

于 2009-07-16T21:36:23.993 回答