如何使 CSS 溢出可见渲染不透明元素答案

【问题标题】：How to make CSS overflow visible render opaque elements如何使 CSS 溢出可见渲染不透明元素
【发布时间】：2010-11-23 17:52:51
【问题描述】：

CSS 溢出：visible 属性允许在元素外渲染内容盒子。但是，Firefox 将溢出框的内容呈现为透明背景使其下方的内容可见。例如：

我想要这个
不透明的背景。

这样它就不会显示下面的内容。

有没有办法让第一个 div 的所有内容都用不透明的背景？

【问题讨论】：

标签： css

【解决方案1】：

这是一种解决方案。

创建一个相对定位的 div，设置高度（即 30 像素）。
在其中放置一个绝对定位的元素，具有 100% 的宽度/高度和不透明的背景图像（或使用 css）

Here's the code with an example.

【讨论】：

我试过了，但是第一个div的背景还是不透明（可以看到后面的Lorem Ipsum）。
@Angelo，这不就是 opaque 的意思吗？
嗯，不，“不透明”是指你看不到（即它不会让光线通过它）。

【解决方案2】：

像这样：

HTML：

<div class="myDiv">
I want this to have<br>
an opaque background.
</div>
<div class="mySecondDiv">
So that it does not show what is below.
</div>

还有这个 CSS：

.myDiv
{
background:red;
height:30px;
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=75); /* IE lt 8 */
-ms-filter: "alpha(opacity=75)"; /* IE 8 */
-khtml-opacity: .75; /* Safari 1.x */
-moz-opacity: .75; /* FF lt 1.5, Netscape */
}

.mySecondDiv
{
background:white;
}

这将在大多数浏览器中以您想要的任何不透明度呈现您的元素（我不确定有多少人会选择它）。

【讨论】：

我试过了，但是在Firefox中，第一个div（即第二行）的部分仍然呈现在第二个div的顶部，背景为透明，而在IE中，第一个div被呈现高于第二个，完全没有重叠。
是的，根据这个 jsfiddle：jsfiddle.net/tchalvakspam/JUndB 它不起作用（chrome 22）。