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

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

难以缩放背景图片以确保它适合缩放按钮并适用于IE。

有没有人曾经这样做过？它甚至有可能吗？

感谢，
三通

来源

2013-07-31 teepusink

您给了我们一个类似的链接，但是您能否向我们展示实际问题本身？也许在jsfiddle/codepen中给出代码（以及问题的截图）。这会帮助我们更好地理解它。 –

如果你的目标浏览器支持CSS3，只需使用的背景大小

.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);

来源

2013-07-31 04:25:28 Horst

这不适用于IE，因为它们不支持背景大小。 –

[从IE9开始肯定会这样]（http://caniuse.com/background-img-opts）。另外，我不推荐'background-size：contains contains'，因为它的整体意图是保持纵横比 - 对宽度和高度单独指定似乎过度混乱，所以我建议编写'background-size：contains'。尽管只是一种风格偏好。 –

道歉，我认为它只有10+，但因为@teepusink没有指定IE的版本，我认为他的意思是9或10以上。 –

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

回答

相关问题