Firefox和Webkit中的背景大小百分比显示不同

Question

我有一个响应式圆形div（使用％宽度，0高度，％填充底部和50％边框半径）和背景渐变。如果更改了背景大小，则它们在webkit / Firefox中不匹配

背景大小为100％/ auto它们都按预期匹配：

但是当我将背景大小设置为其他大小时，它们会有所不同（图像中自动显示200％）。 Safari和Chrome会按预期显示图像，但Firefox不会。 WebKit的： 火狐：

如果我将background-size设置为auto 300％，那么它会在Firefox中正确显示，但在webkit中却太大了。如果我使用-moz-background-size将Firefox设置为其他设置，则较新版本只使用background-size。如果我使用-webkit-background-size将webkit设置为较小的版本，它们也会被background-size属性覆盖

STYL：

.glasses
    display none
    width 8%
    height 0
    padding-bottom 8%
    border-radius 50%
    position absolute
    top 37.6%
    z-index 3
    transform none
    background linear-gradient(135deg, rgba(234,246,254,1) 25%,rgba(10,39,58,1) 25%,rgba(10,39,58,1) 50%,rgba(10,39,58,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 75%,rgba(10,39,58,1) 75%,rgba(10,39,58,1) 100%); /* W3C */
    background-size auto 200%
    background-position 0% 0%
    transition none
&.left
    left 40.2%
&.right
    right 40.2%
&:hover
    .glasses
        transition background-position 0.2s
        background-position 0% -200%

Answer 1

设置

background-size: 200% 200%

而不是

background-size: auto 200%

修复了问题，并在浏览器中一致显示。