CODEWITHSUNDEEP
css
Angelo Borsotti
Angelo Borsotti

Reputation: 327

How to make CSS overflow visible render opaque elements

The CSS overflow: visible property allows to render content outside the element box. However, Firefox renders the content that overflows the box with a transparent background that makes visible what is below it. 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>

Is there a way of making all the contents of the first div be rendered with an opaque background?

Upvotes: 3

Views: 1081

Answers (2)

Kyle
Kyle

Reputation: 67194

Like this:

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>

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

This will render your element with whichever opacity you want in most browsers (I'm not sure how many will pick this up).

Upvotes: 0

Marko
Marko

Reputation: 72222

This is one solution.

  • Create a relatively positioned div, with a set height (i.e. 30px).
  • Place an absolutely positioned element inside it, with 100% width/height and the opaque background image (or with css)

Here's the code with an example.

Upvotes: 1

Related Questions