112

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

4

9 回答 9

143

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

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

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

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

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

于 2012-06-25T06:00:25.690 回答
51

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

1）整个元素是透明的：

visibility: hidden;

2）整个元素有点透明：

opacity: 0.0 - 1.0;

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

background-color: transparent;
于 2014-10-23T22:13:42.323 回答
19

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

    .menue {
      background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
    }
于 2012-06-25T06:00:43.110 回答
13

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

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

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

    用法：

    .transparent{
  background-color: transparent;
}

  • 使用rgbaor hslacolor 函数，允许您将 alpha 通道（不透明度）添加到rgbandhsl函数。它们的 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和doshsla相同，接受可选的 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 值（#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>

于 2019-10-12T20:39:35.327 回答
12

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

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

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

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

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

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

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

  • background: rgba(0%, 0%, 100%, 0.75)
  • background: rgba(0, 0, 255, 0.75)
  • background: hsla(240, 100%, 50%, 0.75)
于 2017-08-19T07:47:55.850 回答
9

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

于 2013-11-23T00:27:33.260 回答
5

尝试这个：

opacity:0;

适用于 IE8 及更早版本

filter:Alpha(opacity=0);

W3Schools 的不透明度演示

于 2012-06-25T06:06:02.080 回答
2

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

.someDive{
    background:transparent 
}
于 2019-10-12T20:14:25.360 回答
1

对于您的情况，我们可以使用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>

于 2021-08-29T10:46:17.383 回答