Question

我想要做的是div具有透明背景，不会影响文字。请考虑以下HTML：

<section class="content">
    <header>
        <h1>Description</h1>
    </header>
    Code
</section>

如果我给它以下CSS：

background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);

该文本会受到section透明度的影响。所以，我开始尝试将内容分层这样：

<div class="code-sample">
    <div class="background"></div>
    <section class="content">
        <header>
            <h1>Description</h1>
        </header>
        Code
    </section>
</div>

然而，由于迭代数量相当多，我无法让section覆盖div。老实说，我已经尝试定位内部div和section绝对和相对。我尝试过使用z-index。但实际上，我只是在黑暗中拍摄。我希望.background具有透明外观：

background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);

但.content覆盖了div。这将允许我随后浮动.code-sample div并使用那些三列布局。

我如何实现我正在寻找的目标？

Answer 1

使用RGB颜色仅设置背景的透明度：

.class {    
   /* Fallback for web browsers that don't support RGBa */
   background-color: rgb(0, 0, 0);
   /* RGBa with 0.6 opacity */
   background-color: 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)";
}

Source

Answer 2

不需要额外的背景div，使用.section上的RGBA值来获得不影响子元素的半透明背景

.content {
background: rgba(0, 0, 0, 0.2)
}

Answer 3

使用RGBa有时会在Firefox中的文本中产生粗糙的边缘。因此，在某些情况下使用半透明png作为背景可能会更好（可能使用data-uri）。

将一个DIV层叠在另一个上以提供具有强文本的透明背景

3 个答案: