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上引入的新属性。许多浏览器已经知道它，但对于那些没有的人，你有两个主要选择：

优雅地降级，类似于Modernizr。我认为这是更好，更简单的方法。
使用不同的图像大小，并根据按钮大小选择每个图像大小（使用vanilla 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')";   
    }

是否可以替代适用于移动设备的CSS background-size属性？

4 个答案: