firefox 背景位置百分比不起作用

Question

我将一组图像合并成一个大图像以节省 HTTP 请求，并使用 background-position 百分比来调整要使用的图像。由于图像的宽度由父元素控制，因此使用百分比而不是像素。

合并后的图像如下：

渲染结果请参考http://zhujianer.com/中的前五张图。

它在 Chrome 上运行良好。在控制台中，我们可以看到 CSS 选择器。

但它意外地在Firefox 中使用了相同的图像。（在 Mac 上的 FF 17.0.1 上测试）从Firebug开始，选择器还在，但是属性background-position-x: -200%;没有了。而且即使我添加了它，FF 也会自动将其删除。所以好像这对FF来说是违法的。

完整的 CSS 代码是（使用 SCSS）：

.process {
    width: 120px;
    height: 120px;
    max-width: 100%;
    border-radius: 60px;
    margin: 0 auto;

    .image-block {
        width: 90%;
        height: 90%;
        background-size: 500%;
        margin: 0 auto;
        position: relative;
        top: 5%;
        background-image: url('../img/process.png');

        &:hover {
            background-position-y: 100%;
        };
    }

    &#process-idea .image-block {
        background-position-x: 0;
    }

    &#process-design .image-block {
        background-position-x: -100%;
    }

    &#process-code .image-block {
        background-position-x: -200%;
    }

    &#process-launch .image-block {
        background-position-x: -300%;
    }

    &#process-monitor .image-block {
        background-position-x: -400%;
    }
}

Answer 1

FF 不知道 background-position-x，他只知道 background-position。所以你可以这样写：

#process-section #process-idea.process .image-block {
    background-position: -200% 0;
}

firefox 背景位置百分比不起作用

firefox background position percentage not working

html

css

firefox