PDA

View Full Version : CSS Opacity Fun



Chrisco
03-27-2006, 12:52 AM
Im playing around with CSS Opacity and I need to take a break from this nightmare! But before I do I figured I would post my problem here since maybe someone out there can help me.

Long story short is I want a background color with slight opacity, and the text / images to be full opacity. The solution which works the best for me is from trial and error is creating 2 DIVs, position them in the same spot on the screen. Div #1 will have a z-index of 0, and Div #2 a z-index of 1. DIV #1 will have the background and #2 the image/text.

The only problem with this is I want my layout to be center aligned AND I have specific pixel dimensions to follow. I have an easy enough time getting all of this centered but then I run into the problem of creating that semi-transparent background.

I have tried to do the following and havent succeeded either way. If anyone has any more suggestions please do tell!

Trial 1:

//Fake CSS Properties for example

Div#Holder{
opacity: 50;
}

Div#Image{
opacity: 100;
}

<Div ID="holder">
<Div ID="Image">
<Img src="ect.jpg" />
</Div>
</Div>

Well this doesnt work, since the image div is embedded in the holder div it inherits the holder div opacity properties for some reason!

Trial 2:

<Div ID="MainHolder">
<Div ID="holder">
</Div>
<Div ID="Image">
</Div>
</Div>

Using the same CSS above this creates 2 div elements, now this would work if I could make them overlap each other but when I try to make them position: absolute this creates the div to dissapear, I assume because it is nested within another div and becomes confused.

Now im no expert so please correct me if I did any stupid mistakes, just trying to learn something new. Hope someone can help out, thank you.

djr33
03-27-2006, 01:38 AM
Well.... are you just wanting a semi-transparent background image behind the text?
If so, why are you coding ANYTHING... just open photoshop, and make two layers, one of your image, the other of the background color on the site, then fade it to like 50%... and you're done.

...right?

jscheuer1
03-27-2006, 01:51 AM
Well.... are you just wanting a semi-transparent background image behind the text?
If so, why are you coding ANYTHING... just open photoshop, and make two layers, one of your image, the other of the background color on the site, then fade it to like 50%... and you're done.

...right?

That's good in all browsers that directly support alpha transparency. Most modern browsers do but, IE doesn't, it requires a special filter (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp) that is not applied as a background image, so there must be no background image for IE but in other browsers, your image should be the background. There are various ways to set IE only css that can accomplish that part. Also keep in mind that generally only the .png format can render this partial transparency. But, owing to the various quirks across browsers as regards opacity and the facts outlined in the first post in this thread, this is still perhaps the best approach.

djr33
03-27-2006, 01:57 AM
Well.... that's one way. But I meant actually saving a .jpg or whatever with nothing special about it. don't use css for making it transparent, but actually make two layers in photoshop, one on top of the other, and save, flattening the image... making a fully opaque image that is your original at part transparency on another background.
In short, use photoshop to create a graphic instead of using anything special to make the browser do so.

Chrisco
03-27-2006, 03:02 AM
Thanks for the replies. As for the background image suggestions I have tried using the .png approach. For some reason I have part of a logo with full opacity (.png) and a special IE script I found to support IE .png support and it works flawlessly. I attempted to make a partially transparent background pixel but when I applied it as a background image the opacity didnt work, not sure why. So I figured CSS would be an interesting way.

As for the JPG approach the reason I want to use CSS opacity is because I am using a large background image and I want the user to be able to be able to see through part of the div, just gives it an interesting look.

djr33
03-27-2006, 03:39 AM
...you're still missing my point.
I'm not talking about a transparent effect, but rather an image that just makes it look like there's an effect.


Umm... just an image with the background superimposed AS PART of the image... not some transparency effect.

Would that work for you?

jscheuer1
03-27-2006, 04:06 AM
This is how I did it (more or less) for a table cell within a draggable division:


<style type="text/css">
#semiTrans {
width:100%;
background:url('images/semi_trans.png');
}
</style>
<!--[if gte IE 5.5]>
<style type="text/css">
#semiTrans {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/semi_trans.png', sizingMethod='scale');
background:;
}
</style>
<![endif]-->

To see the result (http://statestreetblues.com/) click on:

• 2004 Pictures! •

in the lower left part of the page.

djr33's idea would work if the background will always line up with the 'fake' in the same way in all browsers, window sizes and resolutions.

djr33
03-27-2006, 06:10 AM
Yeah. That's a good point. It might vary.

However, if the background were a solid color, that would work. I see now, though, that we're not talking about a stationary object anyway. So... yeah.

About your version, I'm using Safari, the default mac browser, and its streaking.

jscheuer1
03-27-2006, 06:31 AM
Not saying that you are but, it looks like you are low on video memory. Probably a Safari thing. I don't have a Mac to test on but I did use a screen shot service to at least verify that the basic screen looked OK. That entire site is old work that each time a new festival comes up I try to bring the code up to standards reflecting knowledge I have gained since the last time but, expediency often wins out. The current year's crop of pages are tested on IE, FF and Opera - all for the PC. If you have FF for Mac, give that a shot. I am assuming the streaking only occurs when you drag the object and/or as it drops initially. Thanks for the screen shot. Any ideas what causes that?

djr33
03-27-2006, 07:00 AM
It isn't my computer. I've got a top of the line G5 with 2gb ram, plenty of video memory (not sure on a number, but take a guess), and I do video editing.
I'm not sure what's causing it, but yeah.... only when i move it around (and quickly). It might be video memory, but just overloading it for some reason.
I've got a PC too... haven't tested in those browsers... will in a sec.

It might just be safari... its quirky sometimes, but its a pretty compatible browser.... not usually problematic.

djr33
03-27-2006, 07:15 AM
Ok... testing:

IE 5.0 (MAC)--
This is the browser I test stuff on. If it works here, then it'll work in everything (assuming JS is turned on and such).
Quite a few errors:
1. The 2004pics link doesn't get bigger onmouseover
2. only the bullet acts as a link... the word is just a word
3. it opens, but:
--a. the background isn't semitransparent, but just clear... only the outline (grey) and blue bar at the top are visable (in addition to the text and the x in the corner)
--b. I can't move it around... just acts like part of the background, or whatever.
--c. the X works fine. That's it, though.
--d. while hard to see (clear background), I can click the links just fine.
4. Unrelated, but the scrolling text in the upper right works. however, it goes back to the beginning when I rollover any link on the page... resets something... it stops after one scroll.


Mozilla ('version 1.0 preview release') (PC)--
1. The link does get bigger.
2. whole link works.
3. it opens:
--a. transparency is good.
--b. moving is fine.
--c. x is good.
--d. links work...
4. scroller doesn't scroll... just sits there.

IE (v6.0) (pc) (this thing is screwed up from spyware... but probly fine)--
1. 2004pics is bigger to begin with, but works
2. whole link works.
3. opens fine:
--everything works...
4. scroller scrolls and goes til it stops. No issue with rolling over links.

Safari (1.3) (mac)--
1.link works
2.link works.
3. opens, works fine, but:
--when moving, you get the effect in that last pic.
4. scroller text works fine, then stops after once. links don't hurt functionality of it.

the window is kinda jumpy in all the browsers ('cept for safari, oddly enough)...


Hope this helps.

Chrisco
03-28-2006, 06:07 PM
Thanks for all the help! I spent a few days toying around with this and it really does work! Havent tried it in Safari yet but since it wont be moving I doubt there will be much of an issue. Cant beleive the actual use of a forum resolved an issue for me! Its a miracle!

Anyway thanks again to the both of you, very excited about it!

djr33
03-29-2006, 02:10 AM
Cool. Yeah, if its not moving it should be fine.

Also, the only thing that the streaking means is that it takes up a good chunk of memory. Keep that in mind and maybe try to limit other memory intensive tasks on the page if you worry about it. Then again, the moving itself might have been the memory hog... not the transparency.

BYK
02-02-2008, 08:17 AM
Hello all,

I think I'm picking up a pretty old title but I have managed the mentioned effect using CSS. And it's not complicated also.

You may check the login panel at http://e-kalite.com.tr/e-strata_web

The color and the opacity of the background is defined by the ".backDiv" class.

It works on FF and IE7 and the page contains a fix for IE6 which can only display an opaque background. May be with some tweaks IE6 can also support this.

Comments and suggestions are welcome.