HTML中是否有透明的颜色代码？

Question

我正在建设一个新的网站，我需要一个透明的导航栏，这样可以显示出背景。

- Emiel.s

---

是的，对于某些浏览器有这个功能（新特性）。请查看 https://dev59.com/rWrWa4cB1Zd3GeqP_oGz#60876347 - Almir Campos

参见：https://dev59.com/NGgu5IYBdhLWcg3wpYcj - General Grievance

Answer 1

虽然没有透明的颜色代码，但是有 Opacity 样式。可以查看 developer.mozilla.org 上与此相关的文档。

你可能想要先设置元素的颜色，然后再应用透明度。

.transparent-style{

    background-color: #ffffff;
    opacity: .4;

}

你可以使用一些在线透明度生成器，这些生成器还会为您提供特定于浏览器的样式。例如，可以查看http://www.css-opacity.pascal-seven.de/

请注意，当您设置元素的透明度时，任何子元素也会变得透明。因此，您确实需要覆盖任何其他元素。

您可能还想尝试使用RGBA颜色，并使用Alpha（A）设置更改不透明度。例如：

.transparent-style{
    background-color: rgba(255, 255, 255, .4);
}

使用 RGBA 而不是 opacity，可以让子元素不透明。

- Tim B James

---

我正在使用Tumblr构建我的网站，您刚刚给我的代码应该粘贴在哪里？ - Emiel.s

我不知道Tumblr的设置。你需要将这个放在样式表中，并确定与导航栏匹配的id或类。 - Tim B James

从技术上讲，“transparent”颜色关键字是rgba（0,0,0,0）的快捷方式，即全透明黑色，参见https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent。 - haui

Answer 2

当你有一个6位的颜色代码，例如 #ffffff，将其替换为 #ffffff00。只需在末尾添加2个零来使颜色透明。

以下是一篇更深入介绍新标准的文章：https://css-tricks.com/8-digit-hex-codes/

- malvyntv

---

你需要指定哪个浏览器/版本可以使用它。ARGB不在CSS3规范中（https://dev59.com/omgv5IYBdhLWcg3wJNdF#12742729），因此这是非标准行为，在任何情况下我都不建议使用它。 - approxiblue

最近采用的CSS标准带有alpha的十六进制格式为#RRGGBBAA，因此它应该是#ffffff00。它刚刚被添加到标准中，并在2017年中期被浏览器采用。因此，目前不建议使用，至少还没有得到IE / Edge / Opera的支持。 - zeh

正确的做法是在开头加上“#XXFFFFFF”，其中XX：00代表0％，88代表50％，FF代表100％。 - Dave Rincon

Answer 3

你所需要的就是这个：

#ffffff00

在这里，ffffff代表颜色，00代表透明度。

另外，如果你想要50%的半透明颜色，可以这样做：#ffffff80

其中80是50%的十六进制等价物。由于RGB颜色范围为0-255，一半就是255/2 = 128，转换为十六进制后变成80。

而且因为我们想要完全透明，所以我们写00。

- Shubham Kushwah

---

对于50％，您实际上需要使用“#FFFFFF7F”，因为您正在处理十六进制值。 - user196106

50%在十六进制中的两个数字是80。https://css-tricks.com/8-digit-hex-codes/ - steampowered

嘿，这个颜色让我感到忧郁！！！ - Sambhav Khandelwal

#ffffff00 在 mpv 中用作字幕背景会呈现黄色 (#FFFF00)。 - cipricus

@cipricus 确保有6个F。而不是4个。因为#FFFF00确实是黄色的。对于透明白色，请使用#FFFFFF7F但在Adobe Photoshop等软件中无法使用。 - Shubham Kushwah

最终我搞定了。谢谢。https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4#all-hex-value-from-100-to-0-alpha - cipricus

Answer 4

#0000ffff - 这是透明所需的代码。我刚刚这样做了，它有效了。

- Randal

Answer 5

您可以使用rgba()来指定background-color的值，如下所示：

.style{
        background-color: rgba(100, 100, 100, 0.5);
}

0.5 是透明度值

0.5 更像是半透明，将值从 0.5 改为 0 才能实现真正的透明。

- Bineesh

Answer 6

根据 MDN 的说明，有一个 transparent 关键字，它等同于 rgba(0,0,0,0)。

{background-color: transparent;}

- Manish

---

虽然这是正确的，但请多解释一下答案，而不仅仅是粘贴代码。 - Shotgun Ninja

Answer 7

如果你正在寻找安卓应用，可以使用：

#00000000 

- Gopal Meena

---

请仔细阅读问题和标签。这显然是一个HTML、CSS问题。 - Shubham Kushwah

Answer 8

我认为让背景色透明的最佳方式（只对背景透明）是使用

.style{
        background-color: rgba(100, 100, 100, 0.5);
}

上述语句中的0.5是不透明度值。

它仅将不透明度更改应用于背景颜色（而非所有元素）。

CSS中的“opacity”属性将使块中的所有元素变为透明。

- Shenal Madhushan Silva

Answer 9

在这里，不要使导航栏透明，而是删除导航栏中的任何颜色属性，以使背景可见。

奇怪的是，我认为我需要一个透明的颜色，但我所需要的只是删除颜色属性。

.some-class{
    background-color: #fafafa; 
}

to

.some-class{
}

- Barun