Css Filter Alpha

[Andy92]

Hey,

I am making transparent divs, and at the moment i have 1 div...


.myBox
{
margin: auto;
color: #000000;
width: 690px;
padding: 5px;
text-align: left;
border: #000000 10px solid;
background-color: #ffffff;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}


But the problem is, it gived the border, background, text and anything in the div that transparancy (alpha) effect.

Is there any way to just make the border transparent?

[twodayslate]

not that I know of...

You have have to do this


<div style=" filter:alpha(opacity=50); -moz-opacity:0.5; padding 10px; background-color: #000;">

<div>
Content</div>

<div>

Thus you get the transparent 10px border.

[Andy92]

Sorry but it doesnt work.

I have...


<div style="filter:alpha(opacity=50); -moz-opacity:0.5; padding 10px; background-color: #000;">
<div style="color: #FF0000;">
Content</div>
<div>


It displays the writing with a 50% alpha?

How can i take the alpha off for the middle div?

[twodayslate]

<div style="filter:alpha(opacity=50); -moz-opacity:0.5; padding 10px; background-color: #000;">
<div style="color: #FF0000; filter:alpha(opacity=100); -moz-opacity:1.0;">Content</div>
<div>

edit:// Just tried it and it didn't work. I am stuck. perhaps just use a bg image instead of the transparency filter.
http://www.cssplay.co.uk/opacity/png.html

[Andy92]

How about just float the div on top of the alpha div?

[ArcticFox]

The way I've done this in the past is to have one DIV position:absolute with the background/border, and a second one position:absolute on top of the first with z-index.

Another trick I've used for transparent backgrounds is background-image:url(image.gif) of a DIV using what's called a "screen" - an image, which when magnified, looks like a chess board - with the white squares (individual pixels) being transparent. An example of a "screen" is shown on this page: http://tinyurl.com/2759s3

If your main background is a solid color, you can use a darker background color for the DIVs making it look tinted. If you have an image as your main background, you can manipulate a copy of (and darker) the original image for the DIV's background. An example of that is found here: http://tinyurl.com/243uqd

[twodayslate]

Positioning the top div on top of the border div would work. It could be easier just to use a background image.

[rnd me]

Is there any way to just make the border transparent?



try something like:

border: 10px solid transparent;

[ArcticFox]

I think they're wanting 50% semi-transparent...

[Andy92]

Right, basically i have been trying for hours and i cant do this.

I have box1 and box2.

Box 1 has a 50% alpha transparancy on it, and it is all black.

Box 2 is white, has no transparancy to it and is a bit smaller than box1.

So, i have box1 and in box1 is box2. But as box2 is a bit smaller than box 1, you can see the outline of box 1.

So basically, you have your content in the middle, with a white background (box2), and have a tinted transparent black border round the outside (thats box1 behind box2).

But, as box1 has a transparancy to it, as box2 is inside box 1, its making everything in box2 transparent also.

Basically, i want a nice white box with content in, with a tinted border round it.

How can i do this?????????????????????

[ArcticFox]

position:absolute and z-index would be your best option overall.

You can still use the "screen (http://www.basestationzero.com/MySpace/myspaceBG.gif)" as the background image for Box1 which I feel would give you a very similar look without the hassle.

Or if you don't care about the IE browsers, you could use a semi-transparent PNG image for the background on Box1.