Html 透明的 CSS 背景色

Transparent CSS background color

提问by Saranya

I want to make the list menu's background disappear by using opacity, without affecting the font. Is it possible with CSS3?

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

回答by Rohit Azad

now you can use rgbain CSS properties like this:

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

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

0.5 is the transparency, change the values according to your design.

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

Live demohttp://jsfiddle.net/EeAaB/

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

more infohttp://css-tricks.com/rgba-browser-support/

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

回答by jordanb

Keep these three options in mind (you want #3):

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

1) Whole element is transparent:

1）整个元素是透明的：

visibility: hidden;

2) Whole element is somewhat transparent:

2）整个元素有点透明：

opacity: 0.0 - 1.0;

3) Just the backgroundof the element is transparent:

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

background-color: transparent;

回答by oezi

yes, thats possible. just use the rgba-syntaxfor your background-color.

是的，那是可能的。只需将rgba 语法用于您的背景颜色。

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

回答by SherylHohman

Here is an example class using CSS named colors:

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

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

This adds a background that is 25% opaque (colored) and 75% transparent.

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

CAVEATUnfortunately, opacity will affect then entireelement it's attached to.
So if you have text in that element, it will set the text to 25% opacity too. :-(

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

The way to get past this is to use the rgbaor hslamethods to indicate transparency as part of your desired background "color". This allows you to specify the background transparency, independent from the transparency of the other items in your element.

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

Here are 3 ways to set a blue background at 75% transparency, without affecting other elements:

以下是在不影响其他元素的情况下将蓝色背景设置为 75% 透明度的 3 种方法：

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

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

回答by dasdasdasdasd

In this case background-color:rgba(0,0,0,0.5);is the best way. For example: background-color:rgba(0,0,0,opacity option);

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

回答by Vinod

Try this:

尝试这个：

opacity:0;

For IE8 and earlier

对于 IE8 及更早版本

filter:Alpha(opacity=0); 

Opacity Demo from W3Schools

W3Schools 的不透明度演示

回答by FZs

To achieve it, you have to modify the background-colorof the element.

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

Ways to create a (semi-) transparent color:

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

• The CSS color name transparentcreates a completely transparent color.

  Usage:

  .transparent{
    background-color: transparent;
  }
  

• Using rgbaor hslacolor functions, that allows you to add the alpha channel (opacity) to the rgband hslfunctions. Their alpha values range from 0 - 1.

  Usage:

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

• Besides the already mentioned solutions, you can also use the HEX format with alpha value (#RRGGBBAAnotation).

  That's pretty new (contained by CSS Color Module Level 4), but already implemented in larger browsers(sorry, no IE).

  This differs from the other solutions, as this treats the alpha channel (opacity) as a hexadecimal value as well, making it range from 0 - 255 (FF).

  Usage:

  .semi-transparent-yellow{
    background-color: #FFFF0080;
  }
  .transparent{
    background-color: #00000000;
  }
  

• 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符号）的十六进制格式。

  这是相当新的（包含在 CSS Color Module Level 4 中），但已经在更大的浏览器中实现了（抱歉，没有 IE）。

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

  用法：

  .semi-transparent-yellow{
    background-color: #FFFF0080;
  }
  .transparent{
    background-color: #00000000;
  }
  

You can try them out as well:

您也可以尝试一下：

• transparent:

• 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():

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

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

回答by Emin Adilo?lu

Yes you can just plain text as

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

.someDive{
    background:transparent 
}