透明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是透明的：

background-color: transparent;

Answer 3

要实现它，您必须修改元素的

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
```
的工作方式相同，接受可选的 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
```
 后缀、逗号分隔的变体以获得更好的支持。
```
除了已经提到的解决方案之外，您还可以使用带有 alpha 值的 HEX 格式（
#RRGGBBAA
```
 或 
```
#RGBA
```
 表示法
```
）。
它包含在相同的 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>
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 4

是的，这是可能的。只需将

rgba 语法用于您的 background-color

。

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

Answer 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)

Answer 6

在这种情况下

background-color:rgba(0,0,0,0.5);

是最好的方法。
例如：

background-color:rgba(0,0,0,opacity option);

Answer 7

试试这个：

opacity:0;

适用于 IE8 及更早版本

filter:Alpha(opacity=0);

W3Schools 的不透明度演示

Answer 8

是的，您可以只是纯文本

.someDive{
    background:transparent 
}

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

Answer 10

全透明 -> .youClass{background: rgba(0,0,0,0.001);}

透明CSS背景色[重复]

问题描述投票：0回答：10

10个回答

最新问题

透明CSS背景色[重复]

问题描述 投票：0回答：10

10个回答

最新问题

问题描述投票：0回答：10