无法在 Safari 中相对于底部定位 CSS 渐变答案

【问题标题】：Can't position a CSS gradient relative to the bottom in Safari无法在 Safari 中相对于底部定位 CSS 渐变
【发布时间】：2015-08-12 21:38:08
【问题描述】：

我有一个带有重复径向渐变背景的元素 (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/

【问题讨论】：

标签： css safari gradient radial-gradients

【解决方案1】：

这是我刚刚提出的问题的一个答案：

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

所以在我的问题的上下文中，新代码 sn-p 将如下所示：

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 及更低版本都需要回退径向渐变。

【讨论】：