Setting the opacity of an element within a div with opacity defined by CSS?

Question

I'm working on a project in which I am using an image as a background for a menu. I have defined classes in my CSS stylesheet that dictate the appearance when items are or are not "selected", meaning the user is not on the page each item is linked to.

I have it structured with a div on top of the image with styles applied to it to make it have a semi-transparent white background, so it looks like that part of the image is highlighted. Each semi-transparent div also contains the text that makes up the link, with a color set to white. I would like the div to keep the opacity, while the text remains at an opacity of "1".

I have tried the method discussed in a similar question (CSS - Apply Opacity to Element but NOT To Text Within The Element) but the method does not seem to work for me.

I've posted the bit of code for the link on JSFiddle at http://jsfiddle.net/Cwca22/uG5y8/ if you'd like to take a look at it.

Thanks in advance for all the help.

Thanks for all of the answers to my problem Kolink, Nacho, techfoobar and jblasco. It's all good now, so thanks again. ;^) — Cody Capella
– Cody Capella, Commented Jan 2, 2012 at 18:14

justisb · Accepted Answer · 2011-12-22 20:00:22Z

1

If you're looking for a pure CSS solution, and are willing to change your markup a little, take a look at this example:

http://jsfiddle.net/jJ4MZ/3/

It treats each "link" as a combination of separate background and text elements, and then positions them over each other, so that only the background div uses transparency.

answered Dec 22, 2011 at 20:00

justisb

7,3202 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cody Capella Over a year ago

is it okay if I use your code in a commercial project? I have modified it a little as needed, but I just wanted to make sure it was up for use beforehand.

justisb Over a year ago

No problem, glad to have helped!

Niet the Dark Absol · Accepted Answer · 2011-12-22 19:20:54Z

1

If I'm understanding you correctly, you want the background colour of the div to be partially transparent to show the image through, but keep the text opaque? That's simple :3

<div style="background-color: rgba(255,255,255,0.5);">Text</div>

If you want to provide support for browsers that don't allow this format, then you need:

<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>

answered Dec 22, 2011 at 19:20

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

techfoobar · Accepted Answer · 2011-12-22 19:12:55Z

0

Old problem without any standard solutions yet! This is something known to be impossible with today's CSS. The only solution i know of is using JS. Using JS you can catch the mousemove of the affected H# and create/position an element. This new 'over' element should not be a child of the DIV with opacity 0.2.

answered Dec 22, 2011 at 19:12

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

2 Comments

Cody Capella Over a year ago

Ok, I might have to try that, thanks. I'm surprised there's nothing defined yet to solve these kind of problems!

techfoobar Over a year ago

Yes, seriously. I believe this problem has been there from the time CSS2 was under design or something. Zero standard cross-browser way to achieve this till date!

I.G. Pascual · Accepted Answer · 2011-12-22 19:32:12Z

0

Once i wrote a jsFiddle for a problem like this. Here it is http://jsfiddle.net/A53Py/5/

Create a same-level element which positions absolutely behind the elements without opacity. No need to tell it's cross browser.

Hope it helps

answered Dec 22, 2011 at 19:32

I.G. Pascual

6,0355 gold badges46 silver badges62 bronze badges

Collectives™ on Stack Overflow

Setting the opacity of an element within a div with opacity defined by CSS?

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related