css - 带有背景图像的响应式 css 按钮

Question

如何实现包含背景图像的响应式按钮。它类似于http://codecanyon.net/item/css3-responsive-pagination/full_screen_preview/4266559 但是，在我的情况下，“上一个”和“下一个”按钮是一个非常长的文本，并且在中心只是“标题"的页面。

很难缩放背景图像以确保它适合缩放按钮并在 IE 上工作。

以前有人做过吗？甚至可能吗？

谢谢，
三通

Answer 1

如果您的目标浏览器支持 CSS3，只需使用 background-size

.button
{
background:url(img_flwr.gif);
background-size:contain contain;
background-repeat:no-repeat;
}

编辑：由于您需要支持 IE8 及以下版本，您可以尝试：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale');

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale')";

或 dl ie-css3.htc 和：

behavior: url(ie-css3.htc);