css - 背景大小百分比在 Firefox 和 Webkit 中显示不同

Question

我有一个带有背景渐变的响应式圆形 div(使用 % 宽度、0 高度、% padding-bottom 和 50% 边框半径制作)。如果改变了背景大小，它们在 webkit/Firefox 中不匹配

background-size 100%/auto 它们都符合预期:

但是当我将背景尺寸设置为其他尺寸时，它们会有所不同(图像中显示为自动 200%)。 Safari 和 Chrome 按预期显示图像，但 firefox 没有。网络套件: 火狐:

如果我将背景大小设置为自动 300%，它会在 Firefox 中正确显示，但在 webkit 中会太大。如果我使用 -moz-background-size 将 Firefox 设置为不同的设置，则较新的版本只会使用 background-size。如果我使用 -webkit-background-size 将 webkit 设置为较小的版本，它们也会被 background-size 属性覆盖

风格:

.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%

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