Question

我有一个具有重复径向渐变背景的元素（https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient）。

CSS规则如下：

background-image: repeating-radial-gradient(
                    farthest-corner circle at left 100px bottom 329px,
                    rgba(255,255,255,.2),
                    rgba(255,255,255,.6) 1px,
                    rgba(255,255,255,.6) 3px,
                    rgba(255,255,255,.2) 4px,
                    rgba(255,255,255,.2) 18px
                );

除了SAFARI（甚至是IE！）之外，这似乎适用于所有浏览器。

Safari似乎遇到了相对于底部定位渐变的问题。这条线工作正常，但相对于左边，顶部定位渐变：

background-image: repeating-radial-gradient(
                    farthest-corner circle at 100px 329px,
                    rgba(255,255,255,.2),
                    rgba(255,255,255,.6) 1px,
                    rgba(255,255,255,.6) 3px,
                    rgba(255,255,255,.2) 4px,
                    rgba(255,255,255,.2) 18px
                );

请注意排除“左”和“底”关键字。

我似乎在Safari中有任何渐变，重复或不重复这个问题。

这是一个jsfiddle：http://jsfiddle.net/nappels/ods8s2c0/

Answer 1

以下是我刚才提出的问题的答案：

您可以使用css calc（）函数通过执行calc(100% - 329px)来相对于其底部定位元素。这相当于将元素329px相对于其底部定位。

所以在我的问题的上下文中，新的代码片段将如下所示：

background-image: repeating-radial-gradient(
                farthest-corner circle at 100px calc(100% - 329px),
                rgba(255,255,255,.2),
                rgba(255,255,255,.6) 1px,
                rgba(255,255,255,.6) 3px,
                rgba(255,255,255,.2) 4px,
                rgba(255,255,255,.2) 18px
            );

Calc现在有很好的支持（http://caniuse.com/#feat=calc）。 IE 9及以下版本无论如何都需要回退径向渐变。

无法在Safari

1 个答案: