如何在Safari中使径向渐变起作用?

时间:2019-01-16 10:43:16

标签: css css3 safari radial-gradients css-gradients

我在正在构建的新站点上使用了径向渐变,但是颜色在桌面上的Safari中呈现的颜色不同(暗得多)。是否有更好的跨浏览器语法可供使用?

我尝试了不同的前缀,但这并不能解决问题。我正在使用的代码如下。

.item1 {
  background: -webkit-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -webkit-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: -o-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -o-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

当前在Chrome和Firefox中看到的正确输出:https://imgur.com/a/fMJCbZE

Safari中的输出:https://imgur.com/a/KwwiV1b

如您所见,它在Safari中要黑得多。

有人对如何解决这个问题有任何想法吗?

1 个答案:

答案 0 :(得分:0)

首先,您的渐变可以像下面这样简化。

.box{
 background: 
  radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), 
  radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
 height:200px;
}

body {
 background:blue;
}
<div class="box">

</div>

现在的问题是,Safari浏览器不支持at使用的语法,正如您在MDN page中看到的那样:

enter image description here

您可以如下更改语法。我将拆分渐变以更好地查看结果,然后可以轻松地将它们组合起来。

第一个渐变:

.box{
 background: 
  radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), red);
 height:200px;
}

.box2{
 background: 
  radial-gradient( farthest-side, rgba(218, 218, 216, 0.5), red) top right/200% 200%;
 height:200px;
}
<div class="box">

</div>
<div class="box2">

</div>

第二个梯度

.box{
 background:  
  radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), red 300px);
 height:200px;
}

.box2{
 background:  
  radial-gradient( farthest-corner, rgba(253, 253, 253, 0.5), red 300px) top left/200% 200%;
 height:200px;
}
<div class="box">

</div>
<div class="box2">

</div>

诀窍在于,如果您删除at,则渐变默认情况下将从中心开始,而从中心开始时,我们需要X距离才能到达边角或边当我们从某个角落开始时,我们将需要两倍的X距离。这就是为什么我将渐变的大小设置为200% 200%,而我只是将背景位置调整为具有相同的视觉效果。

这是最后的背景:

.box{
 background: 
  radial-gradient( farthest-side, rgba(218, 218, 216, 0.5) , transparent) top right/200% 200%, 
  radial-gradient( farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px) top left/200% 200%;
 height:200px;
}

body {
 background:blue;
}
<div class="box">

</div>