为什么-moz-background-size：覆盖在Firefox中工作？ [英] Why doesn't -moz-background-size:cover work in Firefox?

问题描述

我编码的网站包含3张宽的图片，需要始终保持100％的宽度。我使用媒体查询，我宁愿不必为每个图像制作3个以上的副本，使它们适合。

I'm coding a site that contains 3 wide images which need to have 100% width at all times. I'm using media queries and I would rather not have to make 3+ copies of each image to make them fit.

这是我想要的图像上的CSS：

This is the CSS I want on the images:

#artwork1 {
    width: 1500px;
    height:500px;
    background-image: url(../img/menupic_1.png);
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    
}

这里是一个jsFiddle链接： http://jsfiddle.net/RtPEA/ 。链接只包含需要调整大小的背景的三个< div> 。

Here is a jsFiddle link: http://jsfiddle.net/RtPEA/. The link just contains the three <div>s that need a background that resizes.

code> background-size：cover; 在很多网站上，但在Firefox中，它似乎不工作在这一个。

I have used background-size:cover; on a lot of sites, but in Firefox, it doesn't seem to work on this one.

我也尝试过各种jQuery插件。

I have also tried various jQuery plugins. While I did find some that had some success, they did not work on iOS.

推荐答案

您需要添加 background-size 后加上前缀版本：

You need to add background-size after the prefixed versions:

#artwork1 {
    width: 1500px;
    height:500px;
    background-image: url(../img/menupic_1.png);
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

• http://jsfiddle.net/RtPEA/5/


• http://jsfiddle.net/RtPEA/5/

-moz-background-size 仅支持Firefox 3.6 ，其他前缀版本不能保证。

-moz-background-size was only supported in Firefox 3.6, and the other prefixed versions aren't guaranteed to stick around.

这篇关于为什么-moz-background-size：覆盖在Firefox中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！