Mobile Friendly Website


Doing it with style

partial opacity COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Stu, with the CSS method which fails in Opera, do you think it's possible to remove the opacity applied to the text? Reason being is I'm trying to have a light shade bg, yet the text it also light (too light) decreasing readability.
(09.01.2006, 22:01)

I've tried wrapping the text only in an <em> and setting the opacity of the em with no luck.
(09.01.2006, 22:02)

Tim, on my example one the text does not have any opacity. I have used two containers - one for the opacity and another for the text.
(09.01.2006, 22:28)

I'm using links with a opac background, within the link I tried using em div, etc.. whatever background I apply to the text element within the link, it's still opac like the links bg.
(09.01.2006, 23:25)

Tim, aaah... in my example I have used two separate containers (not one within another). Whatever you place within an opaque container will also be opaque. I don't know of any way round this.
(09.01.2006, 23:31)

This problem bit me too. The CSS3 spec states that while the opacity value is not inherited, it is applied to all contained elements. So if you want a transparent background, but fully opaque foreground (text), then the foreground has to be in a separate element--not nested within the background element--and positioned appropriately.

What we really need is something like background-opacity.
(07.02.2006, 16:54)

Mike Lyle:-
I have perused your site for many months, Stu, I am so impressed with your diligence to detail, changing and going back over things to make them better! If you aren't yet a Christian, you should be! We need people like you to lead people like me!
(19.03.2006, 03:06)

Checking this out in IE7 beta, looks like they're all working as designed from here :)
(20.03.2006, 12:19)

All correct in Opera 9 TP, build 8333. :)
(31.03.2006, 23:48)

The method which doesn't work in Opera ... works in Opera 9. Has since last October, but 9 is still an early test version.
(01.04.2006, 02:56)

It is workink in Opera 9 Final version.
(02.07.2006, 21:22)

I am impressed. You, sir, are an artist.
(07.07.2006, 21:10)

Geert Baven:-
hi Stu, You can conyinue to amaze e by your talent. i try to combine opacity (method 1) with snazzy borders but so far no success. Can you give me a clue?
(26.11.2006, 10:26)

Geert Baven:-
Okay, I finally did manage to combine snazzy borders with background opacity. I added the opacity rules to the, bottom and xboxcontentclasses and it works!
(26.11.2006, 19:22)

This is a great site - will definately keep coming back for more!

Just a quick question if anyone can answer it - am experimenting with Opacity style number 1, and can't for the life of me get the opaque bar to go across the bottom of the image. Can someone give me a pointer?

Thanks! :-)
(21.12.2006, 03:21)

J. Conrad:-
I am trying your opacity method one for a website I am starting. I applied it to individual cells in tables and work fine, except that the text in the cell becomes transparent together with the background.

Is it possible to have the background semi transparent but handle the text independently so the text itself will not show transparency?

I tried some things like adding an extra table in the cel and placingt text in this table but it gets the transparency from behind anyway.

Thanks a lot for any advise!

(17.03.2007, 08:02)

J. Conrad:-
Hi again,

I just realized, dummy me! that you already had worked this around only that in my haste I did not read all the way down! I will try it now.

Thanks lots!

(17.03.2007, 08:25)

Susan McHugh:-
Regarding the Mad Hatter Tea Party drawing -- is this copyrighted? i would like to use it to embellish a cover of a document. This is a consulting company. Where does the image come from? Thank you.
p.s. This is only for document, not for website opacity.
(04.03.2009, 22:29)

I am using your tooltips in the opacity example 1, but cannot get the tooltip to extend beyond the borders of the opacity, to overlap the image, even using z-index hierarchy. I am stumped. Outside of positioning the whole tip to fall within the opaque layer, is there a way to allow it to come to the top and overlap the edge?
(08.02.2010, 20:32)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page