如何使用 CSS 降低元素背景的不透明度？

是否可以仅使用CSS使元素的半透明，但元素的内容（文本和图像）不透明？background

我想在不将文本和背景作为两个独立元素的情况下完成此操作。

尝试时：

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Hello world</span>
</p>

看起来子元素受到其父元素的不透明度的影响，因此相对于父元素也是如此。opacity:1opacity:0.6

分割线

网友回答：

在 Firefox 3 和 Safari 3 中，你可以像 Georg Schölly 提到的那样使用 RGBA。

一个鲜为人知的技巧是，您也可以使用渐变过滤器在Internet Explorer中使用它。

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

第一个十六进制数定义颜色的 alpha 值。

所有浏览器的完整解决方案：

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

这是从不影响子元素的CSS背景透明度，通过RGBa和过滤器。

截图结果证明：

这是使用以下代码时：

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

分割线

网友回答：

使用半透明的 PNG 或 SVG 图像或使用 CSS：

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

这是一篇来自 css3.info，不透明度，RGBA和妥协（2007-06-03）的文章。

请注意，一旦底层背景闪耀，文本仍然需要与背景形成足够的对比度。

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

分割线

网友回答：

这是我能想到的最好的解决方案，不使用 CSS 3。据我所知，它在Firefox，Chrome和Internet Explorer上运行良好。

将一个容器和两个子级放在同一级别，一个用于内容，一个用于背景。
使用 CSS，自动调整背景大小以适应内容，并使用 z-index 将背景实际放在后面。divdiv

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}

<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

模板简介：该模板名称为【如何使用 CSS 降低元素背景的不透明度？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。