透明的CSS背景颜色

Question

我想通过使用不透明度使列表菜单消失而不影响字体.CSS3有可能吗？

Answer 1

嘿现在你可以像这样在css属性中使用rgba

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

0.5是透明度, 现在您可以根据您的设计进行更改.

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

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

Answer 2

记住这三个选项(你想要#3):

1)整个元素是透明的:

visibility: hidden;

2)整个元素有点透明:

opacity: 0.0 - 1.0;

3)元素的背景是透明的:

background-color: transparent;

Answer 3

是的,那是可能的.只需使用rgba语法作为背景颜色.

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

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);
  }
  

  由于CSS的颜色模块等级4，rgb和hsl工作方式与相同rgba和hsla确实，接受一个可选的α值。所以现在你可以这样做：

  .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 值（#RRGGBBAA或#RGBA符号）的 HEX 格式。

  它包含在相同的 CSS 颜色模块级别 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>

• 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>

Answer 5

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

Answer 6

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

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

这增加了25%不透明(彩色)和75%透明的背景.

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

因此,在大多数情况下,您需要使用rgba或hsla方法来指示背景透明度,而不会影响元素中所有内容的透明度.

以下是以75%透明度设置蓝色背景的3种方法:

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

Answer 7

尝试这个：

opacity:0;

对于 IE8 及更早版本

filter:Alpha(opacity=0); 

W3Schools 的不透明度演示