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

Question

CSS中的overflow: visible属性允许在元素框之外呈现内容。然而，Firefox会使用透明背景渲染超出框的内容，这会显示其下方的内容。例如：

<div style="background:red;height:30px;">
我希望这个div<br>
有一个不透明的背景。
</div>
<div style="background:white">
这样它就不会显示下面的内容了。
</div>

有没有一种方法可以使第一个div中的所有内容都以不透明的背景呈现？

- Angelo Borsotti

Answer 1

这是一种解决方案。

• 创建一个相对定位的 div，设置高度（例如 30 像素）。
• 在其中放置一个绝对定位的元素，宽度/高度为100%，并带有不透明的背景图像（或使用 CSS 实现）。

这里是示例代码。

- Marko

---

我已经尝试过了，但是第一个div的背景仍然不透明（我可以看到它后面的Lorem Ipsum）。 - Angelo Borsotti

@Angelo，这不就是“不透明”的意思吗？ - Marko

不，"opaque" 的意思是你无法透过它看到另一边（即它不会让光线穿过它）。 - Angelo Borsotti

Answer 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;
}

这将在大多数浏览器中以您想要的不透明度呈现您的元素（我不确定有多少浏览器会接受此设置）。

- Kyle

---

我已经尝试过了，但在Firefox中，第一个div的那一部分（即第二行）仍然以透明背景的形式呈现在第二个div的上方，而在IE中，第一个div完全覆盖在第二个div之上，没有任何重叠。 - Angelo Borsotti

是的，根据这个jsfiddle：http://jsfiddle.net/tchalvakspam/JUndB/ 它不起作用（chrome 22）。 - Kzqai