html - 将一个 DIV 层叠在另一个之上，以提供具有清晰文本的透明背景

Question

我想要做的是有一个不影响文本的透明背景的div。考虑以下 HTML:

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

如果我给它以下 CSS:

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

文本会受到 部分 透明度的影响。所以，我开始尝试像这样对内容进行分层:

<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。这将允许我随后 float .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