CSS Transparency without affecting font color

Question

I have this style in my controller:

vm.backgroundColor = { 
    'background': '#' + vm.colorHex,
    'filter': 'alpha(opacity = 10)', 
    '-moz-opacity': '0.1', 'opacity': '0.1' 
};

How can I use this without affecting the font color? Thanks

use rgba? like `background: rgba(0,0,0,0.2)` is a transparent black — cocoa, Nov 20 '15 at 15:50
This is just a CSS issue angular is merely the method of applying it. As @cocoa says just use `RGBA` if you are unable to change your data to work with that you would be best to put this logic into a directive where you could have two divs, one which you apply the colour and opacity to. the other contains the text. See this answer: http://stackoverflow.com/questions/5135019/css-opacity-only-to-background-color-not-the-text-on-it#answer-5135431 EDIT: I say use a directive as you shouldnt do DOm manipulation like that in your controller. — ste2425, Nov 20 '15 at 15:53
Possible duplicate of [Parent div transparent background but not affect child div transparency](http://stackoverflow.com/questions/5148128/parent-div-transparent-background-but-not-affect-child-div-transparency) — isherwood, Nov 20 '15 at 15:56

score 2 · Answer 1 · answered Nov 20 '15 at 16:07

By changing the opacity of the whole element, you're by definition fading the whole element.

If you want the background to be semi-transparent, you can achieve this very easily using rgba colours.

The first three numbers represent red, green and blue, and are rated 0-255, and the fourth is the alpha (transparency), which is rated from 0 (transparent) to 1 (no transparency).

The code below would give a transparent red background.

vm.backgroundColor = { 
   'background' : rgba(255,0,0,0.5)
};

CSS Transparency without affecting font color

1 Answers1