Opacity color by code

**magi** · May 28, 2007, 08:53

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** · May 28, 2007, 09:08

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** · May 28, 2007, 09:21

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** · May 28, 2007, 09:38

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** · May 28, 2007, 13:20

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** · May 28, 2007, 13:27

I've to try.

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

Thank you!

**logic_earth** · May 28, 2007, 14:38

HTML Code:

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

Code:

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

    background-color: #000;
}

**magi** · May 30, 2007, 08:42

logic_earth,

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

**magi** · Jun 4, 2007, 15:36

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

**magi** · Jun 13, 2007, 11:52

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:

Code:

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** · Jun 14, 2007, 16:30

It's solve!!

**magi** · Jun 16, 2007, 05:45

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** · Jun 16, 2007, 06:43

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** · Jun 16, 2007, 06:54

Originally Posted by 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

Nadia can you send me a print screen, please?

Thank you for help.

**Nadia P** · Jun 16, 2007, 07:17

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** · Jun 16, 2007, 07:25

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** · Jun 16, 2007, 08:06

Safari on Windows sees this:

**magi** · Jun 16, 2007, 08:12

Originally Posted by logic_earth

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** · Jun 16, 2007, 22:46

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** · Jun 16, 2007, 23:44

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.

User Tag List

Thread: Opacity color by code

Thread Tools

Display

Opacity color by code

Bookmarks

Bookmarks

Posting Permissions