1

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

背景大小为 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%
4

1 回答 1

1

环境

background-size: 200% 200%

代替

background-size: auto 200%

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

于 2014-04-16T20:58:54.797 回答