为什么Safari和Firefox似乎不正确地呈现我的渐变,我如何解决它? [英] Why do Safari and Firefox seem to incorrectly render my gradient and how can I fix it?
问题描述
这是CodePen上的代码。它看起来完全如我所期望的Chrome。 Firefox和Safari看起来都错了。 (我在所有3的最新版本。)
Here's the code on CodePen. It looks exactly as I expect in Chrome. Firefox and Safari both look wrong. (I'm on the latest versions of all 3.)
我正在努力使用一个常量渐变背景跨多个 inline -block
元素。以下是它现在的工作方式:
I'm working on a way to use a constant gradient background across multiple inline-block
elements. Here's how it's working right now:
- 我有一个父
ol
c $ c>:before 伪元素具有渐变背景(透明
到不透明颜色)和z- c> c
/ code>将 -
li $ c>设置为
transparent
并且具有:before
伪元素,显示先前设置为transparent
并将其z-index设置为显示在ol之前:
之前(带有背景渐变)。
background-color
设置为看起来像的颜色 transparent
值设置为。- I have a parent
ol
whose:before
pseudo-element has a gradient background (transparent
to opaque color) and az-index
set to display it above the childli
s. - The
li
s have thebackground-color
set to the color that looks like what the gradient'stransparent
value is set to. - The
li
'scolor
is set totransparent
and have:before
pseudo-elements that display the text that's previously set totransparent
and have their z-indices set to display above theol:before
(with background gradient).
我在Firefox中看到的问题:
The problems I'm seeing in Firefox:
- 渐变看起来像有3个颜色停止(透明,灰色,透明),而不是设置的2个。
- 渐变看起来好像有一个乘法混合模式集。 >
- The gradient looks like it's got 3 color stops (transparent, grey, transparent) instead of the 2 that are set.
- The gradient seems as though it's got a multiply blend mode set.
我在Safari中看到的问题:
在Firefox中,它还显示两个似乎具有乘法混合模式的梯度。一个来自 -webkit-linear-gradient
和一个来自 linear-gradient
。解决明显混合模式的问题应该考虑这个第三个问题。
The problems I'm seeing in Safari:
In addition to the same problems in Firefox, it also displays two gradients which seem to have multiply blend modes. One from -webkit-linear-gradient
and one from linear-gradient
. Solving the issue of the apparent blend mode should take care of this third issue, though.
我的Google搜索让我意识到 background-blend-mode
,但将其设置为正常
(或任何其他有效值)什么也没有更改。我认为它只适用于多个背景在一个单一的元素,但我不知道。但是,这将解释为什么它不能解决我的问题。
My googling made me aware of background-blend-mode
, but setting that to normal
(or any other valid value) changed nothing. I think it only works with multiple backgrounds on a single element, but I'm not sure about that. However, that would explain why it doesn't solve my problems.
推荐答案
问题是, $ c> transparent ,而不是它渐变到的颜色的透明版本。没有按预期渲染渐变的浏览器将 transparent
视为透明黑色。这意味着在渐变中存在黑色和我的颜色之间的不同等级。
The problem was that I used the keyword transparent
rather than a transparent version of the color that it was gradating to. The browsers that didn't render the gradient as expected were treating transparent
as transparent black. That meant that different gradations between black and my color were present in the gradient.
我使用SASS,所以修复很简单:只需使用 rgba()
函数将我的十六进制颜色转换为rgba。
I'm using SASS so the fix is pretty simple: Just use the rgba()
function to convert my hex color to rgba.
到右上角,rgba($ brand-primary,0),$ brand-primary);
我更新了 CodePen上的代码来显示解决方案。
I updated the code on CodePen to show the solution.
这篇关于为什么Safari和Firefox似乎不正确地呈现我的渐变,我如何解决它?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!