0

我想要做的是有一个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-samplediv 并使用它们进行三列布局。

我怎样才能实现我正在寻找的东西？

4

3 回答 3

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)";
}

资源

于 2013-07-15T15:02:43.523 回答
1

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

.content {
background: rgba(0, 0, 0, 0.2)
}
于 2013-07-15T15:04:07.993 回答
1

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

于 2013-07-15T15:28:15.847 回答