透明 CSS 背景颜色

Posted 2023-03-06

【中文标题】透明 CSS 背景颜色

【英文标题】：Transparent CSS background color

【发布时间】：2012-06-26 09:36:45

【问题描述】：

我想通过不透明度使列表菜单的背景消失，而不影响字体。 CSS3可以吗？

【问题讨论】：

是的，当然！你可以通过这个技巧做到这一点：***.com/a/15351192/366884Good lucky

【参考方案1】：

现在您可以像这样在 CSS 属性中使用 rgba：

.class 
    background: rgba(0,0,0,0.5);

0.5 是透明度，根据您的设计更改值。

现场演示 http://jsfiddle.net/EeAaB/

更多信息 http://css-tricks.com/rgba-browser-support/

【讨论】：

谢谢。但我想在不影响字体的情况下消除列表菜单中的默认箭头标记

有没有办法写得更短，比如rgba('black', 0.5)？

没有。 rgba的第四个参数不是透明度。它是不透明度，与透明度相反。 0.9 表示只有 10% 透明。

【参考方案2】：

记住这三个选项（你想要#3）：

1) 整个元素是透明的：

visibility: hidden;

2) 整个元素有点透明：

opacity: 0.0 - 1.0;

3) 只是元素的背景是透明的：

background-color: transparent;

【参考方案3】：

是的，这是可能的。只需使用 rgba-syntax 作为背景颜色。

    .menue 
      background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
    

【讨论】：

嗨！您是否了解使用 aplha 通道的“背景颜色”CSS 定义，但使用 #HEX 值作为颜色？

@PiotrStępniewski 可能晚了，但现在有这样的语法（见my answer）

【参考方案4】：

要实现它，你必须修改元素的background-color。

创建（半）透明颜色的方法：

CSS 颜色名称 transparent 创建一个完全透明的颜色。

用法：

.transparent
  background-color: transparent;

使用 rgba 或 hsla 颜色函数，允许您将 Alpha 通道（不透明度）添加到 rgb 和 hsl 函数。它们的 alpha 值范围为 0 - 1。

用法：

.semi-transparent-yellow
  background-color: rgba(255, 255, 0, 0.5);

.transparent
  background-color:  hsla(0, 0%, 0%, 0);

---

As of the CSS Color Module Level 4, rgb and hsl works the same way as rgba and hsla does，接受可选的 alpha 值。所以现在你可以这样做了：

.semi-transparent-yellow
  background-color: rgb(255, 255, 0, 0.5);

.transparent
  background-color:  hsl(0, 0%, 0%, 0);

---

对标准（颜色模块级别 4）的相同更新也带来了对空格分隔值的支持：

.semi-transparent-yellow
  background-color: rgba(255 255 0 / 0.5);

.transparent
  background-color:  hsla(0 0% 0% / 0);

我不确定为什么这两个会比旧语法更好，所以考虑使用a-suffixed、逗号分隔的变体以获得更大的支持。

除了已经提到的解决方案之外，您还可以使用带有 alpha 值的 HEX 格式 (#RRGGBBAA or #RGBA notation)。

它包含在同一个 CSS Color Module Level 4 中，因此它的支持比前两个解决方案更差，但它已经是 implemented in larger browsers（抱歉，没有 IE）。

这与其他解决方案不同，因为它也将 Alpha 通道（不透明度）视为十六进制值，使其范围为 0 - 255 (FF)。

用法：

.semi-transparent-yellow
  background-color: #FFFF0080;

.transparent
  background-color: #0000;

你也可以试试：

transparent:

div 
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

hsla():

div 
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: hsla(250, 100%, 50%, 0.3);

<img src="https://via.placeholder.com/200x100">
<div>
  Using `hsla()`
</div>

rgb():

div 
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgb(0, 255, 0, 0.3);

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgb()`
</div>

hsla() 使用空格分隔值：

div 
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: hsla(70 100% 50% / 0.3);

<img src="https://via.placeholder.com/200x100">
<div>
  Using `hsla()` with spaces
</div>

#RRGGBBAA:

div 
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

【参考方案5】：

这是一个使用 CSS 命名颜色的示例类：

.semi-transparent 
  background: yellow;
  opacity: 0.25;

这会添加 25% 不透明（彩色）和 75% 透明的背景。

警告 不幸的是，不透明度会影响它所附加的整个元素。 因此，如果您在该元素中有文本，它也会将文本设置为 25% 的不透明度。 :-(

解决此问题的方法是使用rgba 或hsla 方法将透明度* 指示为所需背景“颜色”的一部分。这允许您指定背景透明度*，独立于元素中其他项目的透明度。

从技术上讲，我们正在设置不透明度，尽管我们经常喜欢根据透明度来说话/思考。显然它们是相关的，彼此相反，因此设置一个决定另一个。 指定的数字是不透明度 %。 1 是 100% 不透明，0% 透明，反之亦然）。

这里有 3 种方法可以在不影响其他元素的情况下将蓝色背景设置为 75% 的不透明度（25% 透明）：

background: rgba(0%, 0%, 100%, 0.75) background: rgba(0, 0, 255, 0.75) background: hsla(240, 100%, 50%, 0.75)

【讨论】：

没有。 rgba 中的第四个参数不是透明度。这是不透明度。 0.75 表示 3/4 不透明，而不是 3/4 透明。

是的。我会解决的。

【参考方案6】：

在这种情况下background-color:rgba(0,0,0,0.5); 是最好的方法。 例如：background-color:rgba(0,0,0,opacity option);

【参考方案7】：

试试这个：

opacity:0;

适用于 IE8 及更早版本

filter:Alpha(opacity=0); 

Opacity Demo from W3Schools

【讨论】：

你链接到的网站……太糟糕了。

@TheWandererr 我将从被链接的页面开始。请记住，它应该演示示例代码。然而......没有缩进。请注意，他们使用 html5 文档类型，这意味着他们要么在页面链接后更新页面，要么在页面处于候选推荐状态之前半年使用 HTML5。 Next: 内联 CSS 不利于缓存和可读性。他们不得不在这里使用它，因为他们只有一个面板用于整个页面源，但如果他们使用多个面板，就像 jsfiddle (2010) 那样。甚至对于展示不透明的页面，

@TheWandererr 他们本可以做得更好。通过显示嵌套元素的效果或允许悬停动作禁用它，例如。然后就是整个“假装是 w3 联盟，当你被发现推出另一或两个 reskin，也被标记为 w3something”的事情 - 如果你问我，这有点不诚实。他们还说他们的示例可能“为了可读性而简化”和“不断审查”，但删除空格无助于可读性，而且 IE7 支持也不是新趋势。还有，谁不会花 100 美元买一张损害他们信誉的纸？

@TheWandererr IIRC，他们曾经预览过测试。这些问题混合了琐事和入门级的东西。他们可能也有一些稍微不正确的答案。至于他们的 CSS 教程的不透明度部分：三个专门用于使图像透明的标题 - 他们只更改 CSS 选择器。然后还有两段——一段介绍 RGBA（最后只有背景是透明的），另一段作为“集成示例”（耶！另外，没有缩进）。然后……就是这样。关于不透明度没有什么更多了。不，以后也没有“高级不透明度”主题。

@TheWandererr 让我们谈谈 javascript：他们所有的例子包括：没有缩进（即使在 Javascript 代码中）； innerHTML =（嘿，至少它比他们在 2012 年使用的警报和 document.write 更好，但仍然没有 DOM 操作，除了 jQuery 教程之外，除了一些教程，他们每章列出一个相关方法，即便如此，这只是选择——是的，他们确实列出了document.write）。他们的 XHR 教程使用 readyStateChange 而不是 onLoad（从 IE7 开始支持）。哦，他们在 JSON 中的函数的解决方法？将它们字符串化以便稍后进行评估

【参考方案8】：

是的，你可以只是纯文本

.someDive
    background:transparent 

【参考方案9】：

对于您的情况，我们可以使用rgba()： 首先，我们操作背景颜色，并使用 rgba。

    .selector 
        background-color: rgba(0, 0, 0, 0.3);
    

现在它的作用是，它基本上为您的元素添加了不透明度，以及黑色背景颜色。这就是你运行它时的样子。

    body background-color: #0008f3;

    .container 
        height: 100px;
        width: 100px;
        background-color: rgba(255,255,255,0.5);
    

    <body>
        <div class="container"></div>
    </body>