我在我正在建造的新网站上使用径向渐变,但桌面上的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中更暗。
有没有人对如何解决这个问题有任何想法?
首先,您的渐变可以简化如下。
.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中看到:
您可以更改语法,如下所示。我将分割渐变以更好地查看结果,然后您可以轻松地将它们组合起来。
第一个渐变:
.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>