CODEWITHSUNDEEP
csstransparency
Reuel
Reuel

Reputation: 31

CSS Transparency without affecting font color

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

Upvotes: 1

Views: 261

Answers (1)

Sinister Beard
Sinister Beard

Reputation: 3680

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)
};

Upvotes: 2

Related Questions