Comments on: Background transparency in CSS

By: Wil Barath

Wil Barath — Thu, 16 Sep 2010 15:01:42 +0000

Here's the method I use. It is fluid.

.container {
position:relative;
width:16em;
}
.trans {
position:absolute;
height:100%; /* fills parent block */
background: #C0C0C0; /* visible on white bg */
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}

div class=container
div class=transparent /div
content to go over transparent bg
/div

By: Connor Speers

Connor Speers — Thu, 12 Aug 2010 03:47:49 +0000

I just found this solution! It works in my browser (Chrome), and it should work in other browsers too.
Use the rgba colorspace.

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

By: Marco

Marco — Thu, 08 Oct 2009 09:30:25 +0000

hmm okay:
.box-div is surrounding the other two divs

.bgtrans is an empty div inside .box-div

.text-div is inside .box-div and contains the text

By: Marco

Marco — Thu, 08 Oct 2009 09:19:14 +0000

that did it for me. maybe there is a solution for the dynamic height in ie6?!?

CSS:
.box {
overflow: hidden;
height: auto !important;
height: 100px; /* height has to be specified here for IE6 */
}
.bgtrans {
position: absolute;
left: 0;
top: 0;
display: block;
height: 10000px;
width: 10000px;
background-color: lime;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter:alpha(opacity=50);
z-index: 1;
}
.text {
float: left;
position: relative;
z-index: 2;
}

HTML:

blabla

By: sNOWsh

sNOWsh — Tue, 23 Jun 2009 20:18:10 +0000

this will sort it:

one div element to hold the opaque area 65%
2nd nested div to hold content.

We use it on our search form.....

.trans_holder {
background: #2f7aa4;
filter: alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}

.content_container {
width: 500px;
position: relative;
color: #ffffff;

By: Alpha

Alpha — Fri, 28 Apr 2006 18:57:44 +0000

I'm still getting referals from this page, so I thought I'd update the link to be current.

The one under my name is the current link.

I also fixed the problem with the scrollbar and the other difference between IE and Mozilla/Firefox, but that was so long ago that I don't remember what I did.

I suppose I should just say read the code.

By: Alpha

Alpha — Fri, 05 Aug 2005 21:24:56 +0000

Hmm my link disappeared transparency example

By: Alpha

Alpha — Fri, 05 Aug 2005 21:22:59 +0000

There is a hack that makes transparent PNG's work in IE

Use
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

You can see an example at my weblog with a transparent forground image scrolling in front of a stationary background.

There's a weirdness where the scrollbar is covered up if you make the window too narrow. I didn't write the code and don't know if there's a work around for that.

By: Aquarion

Aquarion — Wed, 30 Nov -0001 00:00:00 +0000

Not impossible, but difficult. The best way currently is probably to create a semi-transparent PNG file and use it as the background, which will work in Moz, Opera & IE Mac at once, but will show up in IEWin as a murky gray. To fix this, you'll need the IE7 hack.

By: Laurabelle

Laurabelle — Wed, 30 Nov -0001 00:00:00 +0000

Aha, thank you. The transparent PNG does the trick.

I don't think that I'm particularly going to worry about IE. I applaud the efforts of those writing IE7, but if I hack my site to fix Microsoft's stupid browser, that creates little incentive for users to switch to something better. I don't expect J. Random Surfer to switch just because my site doesn't look quite so pretty for him, but if he notices, it might be a start.

Hmm. I think I'll write a page about how IE breaks my site and display a link to it only when users load my site in IE. Maybe someone will read it and learn something.