背景大小百分比在 Firefox 和 Webkit 中出现不同答案

【问题标题】：Background size percentage appears different in Firefox and Webkit背景大小百分比在 Firefox 和 Webkit 中出现不同
【发布时间】：2014-05-31 21:28:56
【问题描述】：

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

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

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

如果我将背景大小设置为自动 300%，它会在 Firefox 中正确显示，但在 webkit 中太大了。如果我使用 -moz-background-size 将 Firefox 设置为不同的设置，则较新的版本只使用背景大小。如果我使用 -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%

【问题讨论】：

啊，跨浏览器的标准化。祝你好运！
我们可以看看你的代码吗？是否设置了父宽度，导致垂直百分比填充使用宽度作为参考。，盒子大小在里面？等等...
@GCyrillus 现已添加此内容，抱歉。父宽度为 %。此外，圆形 div 的大小和形状也可以正常工作。

标签： css firefox webkit gradient background-size

【解决方案1】：

设置

background-size: 200% 200%

而不是

background-size: auto 200%

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

【讨论】：

在 Firefox 中也有背景大小的问题，但它是用于使用单个百分比值（例如背景大小：200%）。使用两个值也为我修复了它。为了将来参考，另一件需要注意的事情是 Firefox 不支持 background-position-x 和 background-position-y （但它在 Chrome 和 Safari 中工作正常），在这种情况下使用带有两个值的 background-position （例如背景位置：100% 100%）。