透明的CSS背景颜色


Answers:


116

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

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

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

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

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


谢谢。但是我想在不影响字体的情况下在列表菜单中显示默认箭头标记
Saranya 2012年

1
有没有办法写这个更短,例如rgba('black', 0.5)
phil294

43

请牢记以下三个选项(您想要#3):

1)整个元素是透明的:

visibility: hidden;

2)整个元素有些透明:

opacity: 0.0 - 1.0;

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

background-color: transparent;

14

是的,那是可能的。只需使用rgba语法作为背景色即可。

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

2
嗨!您是否了解有关使用aplha通道的“背景颜色” CSS定义的知识,但是您对颜色使用了#HEX值?
PiotrStępniewski2014年

@PiotrStępniewski可能要晚了,但是现在有了这样的语法(请参阅我的回答
FZs

10

这是一个使用CSS的示例类,命名为colors:

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

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

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

解决此问题的方法是使用rgbahsla方法将透明度指示为所需背景“颜色”的一部分。这使您可以指定背景透明度,而与元素中其他项目的透明度无关。

以下是将蓝色背景设置为75%透明度而不影响其他元素的三种方法:

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

8

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


6

为此,您必须修改background-color的元素。

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

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

    用法:

      .transparent{
        background-color: transparent;
      }
    
  • 使用rgbahsla颜色功能,可以将Alpha通道(不透明度)添加到rgbhsl功能。它们的alpha值范围是0-1。

    用法:

      .semi-transparent-yellow{
        background-color: rgba(255, 255, 0, 0.5);
      }
      .transparent{
        background-color:  hsla(0, 0%, 0%, 0);
      }
    
  • 除了已经提到的解决方案之外,您还可以使用带有alpha值(#RRGGBBAA#RGBA表示法)的HEX格式。

    这是很新的(由CSS Color Module Level 4包含),但是已经在较大的浏览器中实现(对不起,没有IE)。

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

    用法:

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

您也可以尝试一下:

  • transparent

  • rgba()

  • #RRGGBBAA


5

试试这个:

opacity:0;

对于IE8和更早版本

filter:Alpha(opacity=0); 

W3Schools的Opacity演示


6
您链接到的网站...太糟糕了。
John Dvorak 2014年

1
@TheWandererr我将从被链接的页面开始。请记住,它应该演示示例代码。但是...没有缩进。请注意,他们使用HTML5文档类型,这意味着他们要么在链接到此处后更新了页面,要么就在甚至处于候选推荐状态的半年前使用HTML5。Next:内联CSS对于缓存和可读性而言都是不好的。他们有点需要在这里使用它,因为整个页面源只有一个面板,但是如果他们使用多个面板,就像jsfiddle(2010)一样。甚至对于显示不透明的页面,
John Dvorak

1
@TheWandererr他们本可以做得更好。通过显示对嵌套元素的影响或允许悬停操作将其禁用,例如。然后就是整个“假装是w3礼盒,当您发现发射另外一两个Reskin,也被标记为w3something”的东西-如果您问我,那是不诚实的。他们还说,他们的示例可能“简化了可读性”并“不断审查”,但是删除空格并不能提高可读性,并且IE7支持也不是新趋势。还有,谁不愿意为损害他们信誉的纸张支付100美元?
John Dvorak

1
@TheWandererr IIRC,他们曾经有过测试的预览。问题是琐事和入门级内容的混合。他们可能也得到了一些稍微不正确的答案。至于CSS教程的不透明部分:三个专用于使图像透明的标头-它们仅更改CSS选择器。然后再增加两段-一段介绍RGBA(最后只有背景是透明的),另一段作为“集成示例”(是的!而且没有缩进)。然后...就这样。没有什么比不透明度。不,以后也没有“高级不透明”主题。
约翰·德沃夏克

1
@TheWandererr让我们谈谈Javascript:它们的所有示例包括:无缩进(即使是Java代码);innerHTML =(嘿,至少它比警报好,并且document.write它们在2012年曾经使用过,但是在jQuery教程之外,仍然没有DOM操作,除了教程的一点,他们在每章中列出了相关的方法,甚至只是选择了它。 -是的,它们确实列出document.write)。他们的XHR教程使用readyStateChange而不是onLoad(从IE7开始受支持)。哦,还有针对JSON函数的解决方法?将它们串起来以待稍后评估
John Dvorak

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.