使用3张图像的圆角

时间:2010-09-09 05:51:21

标签: html css user-interface controls

我可以将三张图片组合在一起形成一张带有CSS的图片吗?基本上,我需要创建圆角按钮,我有三个图像左,中,右。

我已经在所有页面中使用过,我不可能用两个或三个其他HTML控件替换它。那么有什么方法可以将这些图像组合成一个并将该CSS类应用于asp:button?

请不要建议使用border-radius属性,因为后向支持在这里很重要。提前致谢

2 个答案:

答案 0 :(得分:3)

阅读滑动门技术

http://www.alistapart.com/articles/slidingdoors/

http://www.alistapart.com/articles/slidingdoors2/

使用左右两个滑动图像创建圆形按钮等等。

答案 1 :(得分:0)

最好的方法是修改按钮的HTML。这样的事情效果很好:

<button><span>Click Me!</span></button>

我能想到的一种方法是在页面加载后用{j}将<span>注入<button>

然后,<button><span>所需的CSS将执行背景图像。您可能不需要3个图像,2个应该足够,例如,一个将是左端。而另一个将是一个非常长的右端。使用滑动门技术,您可以制作圆角<button>

你甚至可以用1张图片来做这个,这张图片包含我上面提到的两张图片。

这篇文章很棒:http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/