Question

CSS overflow：visible属性允许在元素外部呈现内容框。但是，Firefox会以透明的方式呈现溢出框的内容使背后的东西可见的背景。 E.g：

<div style="background:red;height:30px;">
I want this to have<br>
an opaque background.
</div>
<div style="background:white">
So that it does not show what is below.
</div>

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

Answer 1

此是一种解决方案。

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

Here's the code with an example.

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

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

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

2 个答案: