css - 无法在 Safari 中相对于底部定位 CSS 渐变

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
                );

请注意排除了“left”和“bottom”关键字。

我在 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 及以下版本将需要径向渐变的回退。