使用它有什么主要优势吗:
background-color: rgba(0,0,0,0);
替代方案:
background-color: transparent;
?
使用它有什么主要优势吗:
background-color: rgba(0,0,0,0);
替代方案:
background-color: transparent;
?
行为完全相同,但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()
值,所以结果略有不同,但符合优雅降级原则。
none
作为值。如果这个声明是唯一的,行为将是你所描述的,但如果有一个声明应该覆盖另一个声明... 如果浏览器忽略了这个规则... 你就无法获得background:none
的等效效果。 - Luca Detomibackground-color
属性将保持不变,并保持默认值,即实际上是transparent
而不是none
(MDN参考)。 - web-tikibackground_color: rgba(0,0,0,0.0);
更加准确,但是相同。如上所述,background_color: 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)
有点不同,需要进行解释。首先,不同之处在于您正在分配颜色并设置透明度。我发现了一个场景,你可以在其中看到两者之间的差异。
我有一个情况,我想在需要使用透明而不是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)
如果你想在React Native中使用透明背景,请应用以下代码片段
backgroundColor: 'rgba(1,1,1,0.1)'