如何在Safari中使径向渐变起作用? [英] How to make radial gradients work in Safari?

问题描述

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

I'm using radial-gradients on a new site that i'm building, but the colours are rendering differently (much darker) in Safari on desktop. Is there a better cross-browser syntax to use?

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

I've tried different prefixes, but this hasn't fixed the issue. The code i'm using is as follows.

.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

The correct output as currently seen in Chrome and Firefox: https://imgur.com/a/fMJCbZE

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

The output within Safari: https://imgur.com/a/KwwiV1b

如您所见，在Safari中，它要黑得多.

As you can see it's much darker in Safari.

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

Does anybody have any ideas on how to fix that?

推荐答案

首先，可以像下面这样简化渐变.

To start with, your gradient can be simplified like below.

.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所使用的语法，正如您在

Now the issue is that safari don't support the syntax used with at as you can see in the MDN page:

您可以像下面那样更改语法.我将拆分渐变以更好地查看结果，然后可以轻松地将它们组合起来.

You can change your syntax like below. I will split the gradient to better see the result, then you can easily combine them.

第一个渐变:

.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%的原因，并且我只是将背景位置调整为具有相同的视觉效果.

The trick is that if you remove the at, the gradient will by default start from the center and when starting from the center we need an X distance to reach either the corner or the sides unlike when we start from a corner when we will need twice the X distance. That's why I made the gradient to have a size of 200% 200% and the I simply adjust the background position to have the same visual.

这是最后的背景:

.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>

相关问题:如何使用CSS为径向渐变设置动画?

这篇关于如何在Safari中使径向渐变起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！