透明的CSS背景颜色

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

现在您可以在CSS属性中使用rgba，如下所示：

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

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

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

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

请牢记以下三个选项（您想要＃3）：

1）整个元素是透明的：

visibility: hidden;

2）整个元素有些透明：

opacity: 0.0 - 1.0;

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

background-color: transparent;

是的，那是可能的。只需使用rgba语法作为背景色即可。

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

这是一个使用CSS的示例类，命名为colors：

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

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

CAVEAT 不幸的是，不透明度会影响它所附着的整个元素。
因此，如果该元素中包含文本，它也会将文本设置为25％不透明度。:-(

解决此问题的方法是使用rgba或hsla方法将透明度指示为所需背景“颜色”的一部分。这使您可以指定背景透明度，而与元素中其他项目的透明度无关。

以下是将蓝色背景设置为75％透明度而不影响其他元素的三种方法：

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

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

为此，您必须修改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);
    }
  

• 除了已经提到的解决方案之外，您还可以使用带有alpha值（#RRGGBBAA或#RGBA表示法）的HEX格式。

  这是很新的（由CSS Color Module Level 4包含），但是已经在较大的浏览器中实现（对不起，没有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>

• rgba()：

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

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</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>

试试这个：

opacity:0;

对于IE8和更早版本

filter:Alpha(opacity=0); 

W3Schools的Opacity演示

是的，您可以将纯文本作为

.someDive{
    background:transparent 
}