无法在 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似乎有一个相对于底部的梯度定位问题。这行效果很好，但是将渐变放置在相对左边的位置，top:

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"one_answers"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)。无论如何，ie9及以下版本都需要径向梯度的回退。