firefox后台位置不工作的百分比

Question

为了保存HTTP请求，我将一组图像合并到一个大的映像中，并使用background-position百分比来调整要使用的映像。使用百分比而不是像素，因为图像的宽度由父元素控制。

合并后的图像类似于：

​

​

关于呈现的结果，请参考http://zhujianer.com/中的前五个图像。

它在Chrome上运行得很好。

在控制台中，我们可以看到CSS选择器。

​

但它意外地在Firefox中使用了相同的图像。(用FF 17.0.1在Mac上测试)

在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，他只知道背景职位.所以你可以这样写：

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