Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread Display Modes
Old Oct 6, 2006, 09:37 PM   #1
macrumors regular
Join Date: Apr 2006
more CSS help regarding opacity

I have a problem with my pictures and text color... It looks like the opacity tag is overlaying everything like the text and the pictures. Which is fine except the pictures look like they are faided.

Any ideas to fix this?

You can fix anything with a screwdriver and a bigger hammer.
x704 is offline   0 Reply With Quote
Old Oct 7, 2006, 01:53 AM   #2
macrumors 603
Join Date: Aug 2001
Location: The Cool Part of CA, USA
I'd go check out this thread for suggestions:


As I explained in that thread, here's your problem: Your "content" DIV has an opacity of .7 set. That means that both the DIV's background and *everything* contained within it also takes on an opacity of .7. Therefore, the text and the pictures will be "faded" as well.

There is no override for this in the CSS Opacity property--no child element can have an opacity higher than its parent. This is an oversight in the spec if you ask me, but it's the way it is.

That said, unless you're planning on doing something much fancier with the background, it seems like there are drastically easier ways of doing what you're trying to do.

For example, since the background color of the DIV is just black, and there's not enough texture in the pattern behind it to be visible, you could get a functionally similar effect by just setting the background color to about #333333. I can't even see the pattern through the transparent background on my monitor.

Alternately, you could set a background pattern that matches the one outside but is darker; with proper positioning of the start of the tile, they'll line up and it'll look the same as if it were overlapping. If you wanted to use a fancier image, you could do the same with absolutely positioned background images.

Another option would be a small PNG with an alpha channel set to about 30%; this doesn't work in IE5 or 6, but it will work in IE7 and just about anything else. That's what I've done in a similar situation; it looks fine even in the browsers that don't support it--just grey instead of transparent.

Or, you could use the CSS3 RGBA (RGB+Alpha channel) color for the background, as someone suggested in that other thread. Right now nothing but Safari supports it, but those that don't will just show a solid color and eventually support for it should expand.

There are other ways of going about this, of course, and maybe somebody will chime in with a smarter one than my suggestions.
Makosuke is offline   0 Reply With Quote
Old Oct 12, 2006, 01:15 AM   #3
Thread Starter
macrumors regular
Join Date: Apr 2006
Hmm.. Interesting. The reason I did not go with making a darker version of the background is because I plan on making a program that will build a tile picture for my website every oh, I don't know maybe 4 hours or something. I just don't really know much CSS and was wondering if there was a simple fix. I guess I will have to try a few things when I get to it.
You can fix anything with a screwdriver and a bigger hammer.
x704 is offline   0 Reply With Quote

MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Can the opacity of the task bar be changed? Tikatika iOS 7 9 Sep 18, 2013 03:56 PM
Opacity of a dropdown menu Brendon Bauer Web Design and Development 8 Jan 8, 2013 03:58 PM
iDraw Opacity MacBook Pro"ish Mac Applications and Mac App Store 0 Nov 20, 2012 11:19 AM
Set opacity of UINavigationBar using UIAppearance in iOS5? moonman239 iPhone/iPad Programming 5 Jun 21, 2012 03:36 PM
Menu Bar Opacity bitsoda OS X 10.8 Mountain Lion 2 Jun 12, 2012 07:01 PM

Forum Jump

All times are GMT -5. The time now is 06:56 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2015, MacRumors.com, LLC