透明的 CSS 背景颜色

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

544006 次浏览
小开

现在你可以像下面这样在 CSS 属性中使用 rgba:

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

0.5是 transparency，根据你的设计改变值。

现场演示 < a href = “ http://jsfiddle.net/EeAaB/”rel = “ norefrer”> http://jsfiddle.net/eeaab/

更多信息 < a href = “ http://css-tricks.com/rgba-reader-support/”rel = “ norefrer”> http://css-tricks.com/rgba-browser-support/

小开

是的，这是可能的。只是使用 Rgba 语法为您的背景颜色。

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

试试这个:

opacity:0;

对于 IE8和更早的版本

filter:Alpha(opacity=0);

来自 W3学校的不透明性演示

小开

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

小开

请记住以下三个选择(你想要的第三个选择) :

1)整个元素是透明的:

visibility: hidden;

2)整个元素有点透明:

opacity: 0.0 - 1.0;

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

background-color: transparent;
小开

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

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

这增加了一个背景是25% 不透明(彩色)和75% 透明。

警告 不幸的是，不透明度会影响它所附加的 完整的元素。
所以如果你在那个元素中有文本，它也会将文本的不透明度设置为25%

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

  • 从技术上说，我们正在设置 不透明，虽然我们经常喜欢说/想在 transparency方面。显然它们是相关的，相反的，所以设置一个决定另一个。 指定的数字是不透明度% 。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)
小开

是的，您可以直接将文本显示为

.someDive{
background:transparent
}
小开

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

创建(半)透明颜色的方法:

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

    用法:

    .transparent{
background-color: transparent;
}

  • 使用 rgba或 hsla颜色函数，可以向 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 颜色模块 Level 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 值(ABC0或 #RGBA表示法)的 HEX 格式。

    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 在较大的浏览器中实现 (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).

    用法:

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

你也可以试试:

  • 返回文章页面

    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>

  • 返回文章页面

    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>

  • 返回文章页面

    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>

  • 返回文章页面

    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>

小开

对于你的情况，我们可以使用 rgba(): 首先，我们操作背景颜色，并使用 rgba。

    .selector {
background-color: rgba(0, 0, 0, 0.3);
}

Now what this does is, it basically adds an opacity to your element, along with the black background color. This is how it'd look when you run it.

    body {background-color: #0008f3;}


.container {
height: 100px;
width: 100px;
background-color: rgba(255,255,255,0.5);
}
    <body>
<div class="container"></div>
</body>


提交答案