透明颜色 vs rgba(0,0,0,0)

Question

透明颜色 vs rgba(0,0,0,0)

23

使用它有什么主要优势吗：

background-color: rgba(0,0,0,0);

替代方案：

background-color: transparent;

?

- sdvnksv

相关：CSS background:none vs background:transparent - web-tiki

4个回答

1

请注意：background_color: rgba(0,0,0,0.0); 更加准确，但是相同。如上所述，background_color: transparent; 会在旧版浏览器中得到支持。

使用background_color并不是问题，因为它在两个指示器中都被普遍使用。问题在于透明度的赋值——透明（transparent）和rgba之间的区别。 transparent显然将背景设置为透明，没有颜色选项；另一个选择是指定颜色分配，可以是十六进制或其他接受的颜色值，例如blue rgb(x,x,x) rgba(x,x,x,x) #xxxxxx hsl(x,x,x) hsla(x,x,x,x)等。

然而，rgba(x,x,x,x) 有点不同，需要进行解释。首先，不同之处在于您正在分配颜色并设置透明度。

该设置中的"rgb"部分代表红绿蓝，表示前三个零设置(0,0,255,X)，每个0接受从0到255的值。通过组合这三个值进行调整，可以混合颜色设置以产生单一颜色。

在(rgb a)中，“a”及其零设置(x,x,x,0)是ALPHA通道，用于设置前三个组合颜色(x,x,x,?)的不透明度/透明度。特别注意，最后一个零值(x,x,x,0)接受从0.0到1.0的值范围。0.0设置为完全透明，而1.0则是实心的。因此，使用设置rgba(x,x,x,0.5)会产生半透明的给定颜色。

- BobDCoder

0

我发现了一个场景，你可以在其中看到两者之间的差异。

我有一个情况，我想在需要使用透明而不是rgba（0,0,0,0）背景的div上放置一条红色对角线作为删除线。

这是我的代码：

<div className="relative">
  <p>Text here</p>
  <div style={{background: "linear-gradient(to left top, transparent 45%, #d10813 48.5%, #d10813 51.5%, transparent 55%)"}} className="absolute top-0 w-full h-full"></div>
</div>

如果您将透明度45％切换为rgba（0, 0, 0, 0.45），您会发现它不再起作用。

因此，简而言之，具有不透明度的透明色与具有不透明度的黑色显然不同。

（代码在react中，类名来自tailwindcss）

- user16100372

-3

如果你想在React Native中使用透明背景，请应用以下代码片段

backgroundColor: 'rgba(1,1,1,0.1)'

- S Shikhar

我真的看不出你为什么要这样做。请详细说明你的答案... - yoerids

如果你曾经使用过React-Native，你会自动理解这个...不需要详细解释。 - S Shikhar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luca Detomi · Accepted Answer

行为完全相同，但transparent也与IE8兼容。RGBA更先进（但不支持IE8），并且允许您快速进行修改，以便您可以得到一个"几乎透明"的颜色，而无需完全更改属性。

例如，非常快捷地设置可能如下：

background-color: rgba(0,0,0,0.1);

由于浏览器默认情况下会忽略无法识别的属性，因此可以将它们组合在一起，以便在新版本浏览器中使用新属性，但在旧版本浏览器中保留回退方案，只需同时输入这两个属性即可：

由于浏览器默认情况下会忽略无法识别的属性，因此可以将其组合在一起，以便在较新版本的浏览器中使用新属性，但是对于旧版本的浏览器，则需要提供备用方案。方法是简单地输入这两个属性：

background-color: transparent;
background-color: rgba(0,0,0,0);

或者更有用的是，在已引用的几乎透明背景的情况下，你可以写：

background-color: transparent;
background-color: rgba(0,0,0,0.1);

新的浏览器将设置rgba(0,0,0,0.1)为背景，覆盖先前的transparent声明，但IE8将会将transparent作为背景，因为它会忽略无法识别的rgba()值，所以结果略有不同，但符合优雅降级原则。