Opacity color by code

[magi]

Hello all.

What I am looking for?

- I've a background image and the text is to be written in a table with a grey color background.

But this grey color should have an opacity, because I want the background image to be seen.


How can I do this without an image and without using Flash? I don't know how.
Thank you for your help.

[logic_earth]

The best way would be a PNG using Alpha channels. It would also be the less headache way then trying to work with opacity in CSS.

[Shpook]

Just remember, IE6 and under don't support PNG's Alpha channel, without some Javascript work-arounds. And even then, It doesn't work if the image is defined as a background through CSS.

[magi]

Hmm... I don't want to use an image. Maybe I am going to find how to do it in CSS?

The only image here must be the background.

Thank you

[logic_earth]

well to do it with CSS you need to add an extra div before or after the table and shim it under the table.

Otherwise if you set the opacity on the table it will make every thing transparent including the text.

Sure you still want to do it with just CSS?

[magi]

I've to try.

If I can't I will not used a transparent item, it will be opaque.

Thank you!

[logic_earth]

<table>...</table>
<div class="opacityshim>...</div>

.opacityshim {
    filter:alpha(opacity=50); 
    -moz-opacity: 0.5; 
    opacity: 0.5;

    background-color: #000;
}

[magi]

logic_earth,

Many thanks for your help. I'm going to try it.

[magi]

You're the ONE. It works!! Thank you.

[magi]

Here I am again. : )

Please have a look to the result Here

Is it possible to put images and text with no opacity?

I tried using Z-Index:

div.A {
    width: 405px;
    border: 0px;
    position:absolute;
    top: 100px;
    left: 115px;
    height: 352px;
    filter:alpha(opacity=50); 
    -moz-opacity: 0.7; 
    opacity: 0.7;
    background-color: #ccffff;
    color:#000000;
    padding: 10px;
    z-index: 1;
    }

.middle {
    display: table-cell; (this is to center the image, something I also can't solve.)
    vertical-align: middle; 
    position: static;
    z-index: 2;
}

Thank you.

[magi]

It's solve!!

[magi]

Well, back in town.

At Safari it seems it doesn't work, people don't see anything.

I've read this:

Safari and Mozilla

These browsers support opacity. It requires a fraction value, percentages are not allowed.

The code is what you gave me and works fine at IE and FF.

If you can help me again please check it here.

[Nadia P]

Win Safari beta is showing the opacity, but the content is right up at the top of the screen and only the bottom half of that shows ...... I'd hazzard a guess that this is not the way it is being seen on Mac ....

Nadia

[magi]

Win Safari beta is showing the opacity, but the content is right up at the top of the screen and only the bottom half of that shows ...... I'd hazzard a guess that this is not the way it is being seen on Mac ....

Nadia

Nadia can you send me a print screen, please?

Thank you for help.

[Nadia P]

It will have to be tomorrow sometime though - it's after 1am here and I need some sleep :-)

I'm talking about the beta version of Safari for windows - no Safari on a Mac.... so I wouldn't be too worried about it if it looks ok on your Mac!

Nadia

[magi]

You're very nice.

Well, I have PC and I also have try install twice Safari demo and I can't see the File Menus, and the bar address not working. That's why I came here, because the client has MAC and said that don't see none.

Thank you!

[logic_earth]

Safari on Windows sees this:

[magi]

Safari on Windows sees this:

Thank you. :/

Now, how can I solve this? It's normal to what works in FF and IE doesn't work at Safari?

[Nadia P]

Ok, here you go - I've put your page through browsercam.com and here's a heap of snapshots from both Win and Mac, their various browers.
You certainly do have a problem with the 'real' safari by the looks of things.

These sites may help with 'bugs'....
http://www.quirksmode.org/
http://www.positioniseverything.net/

Nadia

[felgall]

Depending on which version of Safari you might need

-khtml-opacity: 0.7;

which was the one of the four opacity variants left out of the preceding code.