是否有适用于移动设备的 CSS 背景大小属性的替代方案？

Question

在 CSS3 中，在按钮的背景图像上设置 background-size 会将其拉伸到按钮的高度和宽度。

有没有 background-size 的替代方案，因为我的目标是移动设备，有些不支持它。我不想以 px 或 em 指定任何内容。

Answer 1

请参阅 http://css-tricks.com/perfect-full-page-background -image/ - 它详细介绍了一种在不使用背景大小的情况下执行此操作的方法。

Answer 2

不，不是真的。

background-repeat 可以获取一张背景图像，并沿 x 轴和/或 y 轴重复它。根据您希望按钮的外观，这可能会起作用：请参阅 http:// sophie-g.net/jobs/css/e_buttons.htm

但是没有任何东西具有与 background-size 相同的效果。这就是引入 background-size 的原因。

Answer 3

不，没有。

这是 CSS3 引入的一个新属性。许多浏览器已经知道它，但对于那些不知道的浏览器，您有两个主要选择：

• 优雅降级，例如现代化。我认为这是更好、更简单的方法。
• 使用不同的图像尺寸，并根据按钮尺寸选择每一种图像尺寸（使用普通 JavaScript、jQuery、Motools 等）。

Answer 4

您可以在 IE8 上尝试此操作。我的项目是在 MVC4 中，我尝试了这个并为我工作（IE+Chrome）

div class="logoDiv">  </div>  

，在 css 中你将你的类定义为

.logoDiv {  
        max-width: 100%;
        height: 100px; /*(My Image height was 100px .....You please define yours)*/
        background: url("../Images/logo.jpg") no-repeat;
        background-size: cover; 
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../Images/.logo.jpg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../Images/logo.jpg', sizingMethod='scale')";   
    }