我正在使用 JQuery 库。我使一些 div 透明（0.7）。该div中有一些文本。我看到了不愉快的情况：文本字体很丑。据我了解，因为所有 div 区域都是透明的，我的文本也是。我可以让它不透明吗？
更新
我试图让我的 div 不透明：文字很棒！那么，我怎样才能使我的 div 透明，但其中包含的文本不应该。
在 Win、Linux、MacOS 中测试。 Chrome、火狐、Opera、IE
【问题讨论】：
我创建了一个用于半透明背景的通用类，一个用于不可见文本容器的通用类，以及一个用于特定实例的类，具有任何大小和位置样式。例如，我可能有.color_box、.text_box 和.side_note。然后我创建一些如下代码：
样式，像这样：
.color_box, .text_box {
position: absolute;
z-index: 20;
...
}
.color_box {
background: #xxxxxx;
opacity: .5;
z-index: 10;
...
}
.side_note {
top: 50px;
left: 100px;
width: 240px;
...
}
和这样的 HTML：
<div class="text_box side_note">lorem ipsum dolor sig amet...</div>
...
<div class="color_box side_note"></div>
第二个 div 可以与第一个 div 放在同一个容器内的任何位置，我更喜欢尽可能晚地放置，因为它对 SEO 目的没有帮助。这种特殊设置对于具有许多此类半透明框的站点最有用。您需要一个类来创建一个新设置，并且您为每个类重复使用 .color_box 和 .text_box 类。如果您需要更改背景颜色，它在一个地方。任何一个盒子的定位都在一个类中。
【讨论】：
有趣的问题。这是我首先想到的解决方案：
<style>
.wrapper {position:relative;}
.transparent { position:absolute; background:red; top:0; bottom:0; left:0; right:0;}
</style>
<script>
$(document).ready(function(){
$('.transparent').css('opacity',.7)
});
</script>
<div class="wrapper">
<div class="transparent"> </div>
<div class="opaque">your text</div>
</div>
基本上，您将文本放置在透明框的顶部。
【讨论】：
我倾向于使用半透明的 .png 文件，然后使用 IE6 的 hack，在 this thread 以及其他选项中进行了描述。
【讨论】：
您可以使用 rgba() 来指定框的颜色，rgba() 不会被任何子元素继承。不幸的是，rgba 仅受更现代的浏览器（FF、safari、chrome）支持，但使用起来非常棒。
#yourbox {
background-color:rgba(red,green,blue,alpha);
{
你所做的只是在RGB中获取你想要的颜色值，然后最后设置alpha值，你还需要为不支持它的浏览器设置一个备用值。
#yourbox {
background-color:#fff;
background-color:rgba(255,255,255,0.5);
{
这将在大多数现代浏览器中为您提供一个不透明度为 50% 的白框，但在大多数版本的 IE 中为您提供一个纯白框。
【讨论】：