CODEWITHSUNDEEP
javascriptcssbackgroundbackground-color
whatyouhide
whatyouhide

Reputation: 16781

Transparency in CSS - fighting with inheritance

I have an ul with a background-color of rgba(15,15,15,0.8). I want a li element of the list to be more transparent, e.g. I want it to have background-color set to rgba(15,15,15,0.5). The problem is that being the inner li element transparent, I see the background color of its ul parentso what I get is actually an even darker background

Is there a way in CSS (but for that matter it would be fine through JS/jQuery too) to "cancel" the background property of the parent?

Edit

Note that also colouring the "rest" of the list (the part of the list not made by lis) would be fine, even if I don't think it's easy nor a good solution.

Upvotes: 2

Views: 148

Answers (3)

Ana
Ana

Reputation: 37179

You could do it by not setting a background on the ul and setting RGBa borders on the li.

demo

Relevant CSS:

border: solid .5em rgba(15,15,15,.8);
background: rgba(15,15,15,.5);

(you can adjust the width values of the borders to suit your needs)

Upvotes: 1

miracules
miracules

Reputation: 696

Sorry, but that would be like expecting a clearer view by putting a shaded piece of glass on top of another piece of shaded glass. It would just not work. :)

What you need to do is to reverse the way you think. Make the topmost layer have the right look and then move to the one beneath it.

Style the li elements with a none transparent background. Use a sprite to get the look you want if you need something else but pure color. Then move on to the ul element and give that the look you want - even using opacity.

Upvotes: 0

dnagirl
dnagirl

Reputation: 20456

if you're just trying to lighten the colour (as opposed to letting underlying images or text show through), you might consider using background-color: rgba(256,256,256,0.3) which would put a light haze of white over your child element.

view here: http://jsfiddle.net/9VBnr/

You might also check out this oldie but goodie from Eric Meyer: http://meyerweb.com/eric/css/edge/complexspiral/demo.html

Upvotes: 0

Related Questions