logo标签列表

透明CSS背景颜色

htmlcssopacity
148
我想使用不透明度来隐藏列表菜单的背景，但不影响字体。在CSS3中是否可能实现此效果？
好的，当然可以！你可以通过这个技巧来实现：https://dev59.com/QWw15IYBdhLWcg3wA28A#15351192祝你好运！ - Saud Alfadhli
10个回答
183
谢谢。但我想在列表菜单中消除默认的箭头标记，而不影响字体。 - Saranya
3
有没有一种更简洁的方法来写这个，比如 rgba('black', 0.5)？ - phil294
2
不，rgba的第四个参数不是透明度，而是不透明度，与透明相反。0.9表示只有10%的透明度。 - Jonathan Pool
65

记住以下三个选项（您需要#3）：

1）整个元素是透明的：

visibility: hidden;

2) 整个元素有一定的透明度：

opacity: 0.0 - 1.0;

3) 该元素仅有背景是透明的：

background-color: transparent;
33

要实现它，你需要修改元素的background-color。

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

  • The CSS color name transparent creates a completely transparent color.

    Usage:

    .transparent{
  background-color: transparent;
}

  • Using rgba or hsla color functions, that allow you to add the alpha channel (opacity) to the rgb and hsl functions. 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);
}

    As of the CSS Color Module Level 4, rgb and hsl works the same way as rgba and hsla does, accepting an optional alpha value. So now you can do this:

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

    The same update to the standard (Color Module Level 4) also brought in support for space-separated values:

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

    I'm not sure why would these two be any better than the old syntax, so consider using the a-suffixed, comma-separated variants for greater support.

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

    That's contained by the same CSS Color Module Level 4, so it has worse support than the first two solutions, but it's 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: #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() with space-separated values:

    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>

20

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

    .menue {
      background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
    }
2
你好！你知道如何使用#HEX值来定义带有alpha通道的'background-color' CSS属性吗？ - Piotr
@PiotrStępniewski 可能有点晚了，但现在有这样的语法（请参见我的答案） - FZs
15

这是一个使用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)
1
不，rgba中的第四个参数不是透明度，而是不透明度。0.75表示3/4不透明，而不是3/4透明。 - Jonathan Pool
没错，我会修复它。 - SherylHohman
9
在这种情况下，background-color:rgba(0,0,0,0.5);是最好的选择。 例如：background-color:rgba(0,0,0,opacity option);
5
6
你链接的网站...太糟糕了。 - John Dvorak
2
@TheWandererr 他们本可以做得更好。比如展示嵌套元素的效果或者允许悬停操作来禁用它。此外，他们还会假装成w3联盟，被发现后再推出另一个或两个重设计，也都打上w3something的标签——如果你问我，这有点不诚实。他们还说他们的示例可能会“简化以提高可读性”和“不断审查”，但是去掉空格并不能帮助可读性，IE7的支持也不是新潮流。同时，谁会为了一张损害其信誉的纸而支付100美元呢？ - John Dvorak
2
@TheWandererr 如果我没记错的话，他们曾经有一个测试的预览。问题是一些琐事和入门级别的东西。他们的一些答案可能也有轻微的错误。至于他们CSS教程中不透明度部分：三个标题专门用于使图像透明 - 他们只更改CSS选择器。然后是另外两段文字 - 一段介绍RGBA（最终只有背景是透明的）和一段“集成示例”（耶！还没有缩进）。然后...就这样了。关于不透明度，没有更多的内容。而且，稍后也没有“高级不透明度”主题。 - John Dvorak
2
@TheWandererr，让我们谈谈Javascript：他们所有的示例都没有缩进（即使在Javascript代码中）；innerHTML =（嘿，至少比2012年使用的警报和document.write好，但仍然没有DOM操作，除了jQuery教程之外，只有一点教程，在其中列出每章的相关方法，即使如此，它也只是选择 - 是的，他们确实列出了document.write）。他们的XHR教程使用readyStateChange而不是onLoad（自IE7以来支持）。哦，还有他们在JSON中使用函数的解决方法？将它们字符串化以便稍后进行eval。 - John Dvorak
2
对于Javascript、CSS和HTML，Mozilla开发者网络是事实上的文档站点。对于jQuery，请前往其官方网站jQuery.com。如果你需要编写PHP代码，可以访问PHP.net。作为一个存放HTML片段的地方，有jsFiddle.net。此外，还有JSBin。StackOverflow也有自己的片段引擎，可以在问题和答案中使用。 - John Dvorak
显示剩余4条评论
2
可以使用普通文本。
.someDive{
    background:transparent 
}
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>

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接