CSS 创建一个透明的 div答案

【问题标题】：CSS Create a transparent divCSS 创建一个透明的 div
【发布时间】：2011-06-26 06:51:43
【问题描述】：

有没有办法让 div HTML 元素半透明？

【问题讨论】：

半透明容器的一个缺点 - div 的所有内容，如文本、图像等，也将是半透明的。我建议您在此容器之上放置另一个容器，其中包含任何内容。当然，如果你没有在 div 中放任何东西，那么你很好。

标签： jquery html css transparency transparent

【解决方案1】：

使用 CSS，这是跨浏览器解决方案

div {
    opacity: 0.5;
    filter: alpha(opacity = 0.5);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

【讨论】：

比我的想法好很多。

【解决方案2】：

这适用于所有浏览器

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

如果您不希望透明度影响整个容器及其子容器，请查看此解决方法http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

【讨论】：

实际上我发现确实整个内容都变得透明了，而我只希望背景是透明的。我的标记如下：
- text
- 文本
- 文本 a>
有没有办法让文字不透明？引用的文章包含绝对定位并使用同级容器，但我无法更改超文本标记。
使用内部容器的相对定位和外部容器的绝对定位，如 i 提供的建议是您可以在不影响内部文本的情况下进行透明背景的唯一方法，否则您需要使用改为透明图像。

【解决方案3】：

使用半透明的背景 PNG 文件，希望您不必支持 IE6？

【讨论】：

我有点困惑。背景图片会用作 div 的背景，还是会以某种方式放置在 div 的顶部？

【解决方案4】：

如果您只希望 div 的背景半透明，而不是其中的任何文本和元素，您可以简单地将背景颜色设置为透明的（即 alpha

一个例子是our website，这里是一个最小化的例子：

<html>
<head>
  <title>Transparency test</title>
  <style type="text/css">
    body {
      background-image: url(http://www.fencing-game.de/style/background6.png);
    }
    #trans {
      background-color: rgba(255,0,0,0.5);
      max-width: 80ex;
    }
    p {
    max-width: 70ex;
    margin: auto;
    }
    #nontrans {
      background-color: rgb(255,255, 0);
    }
  </style>
</head>
<body>
  <div id="trans">
    <p>normal text</p>
    <p id="nontrans">nontransparent</p>
    <p>normal text</p>
  </div>
</body>

【讨论】：

这种技术不适用于 IE6、IE7 和 IE8，这点毫无价值。这是一个 hack：dimox.net/cross-browser-rgba-support