Separating background-color and opacity?

If you use Sass you can define a variable for the rgb color, and then insert it into a rgba color, only specifying the alpha transparency component.

$base-color: rgb(200,150,100);

a {
  color: rgba( $base-color, .7 );
}

Found on https://robots.thoughtbot.com/controlling-color-with-sass-color-functions


It is currently not possible to specify partial color components and have the rest of the values inherit or cascade in CSS.

If you need to specify a color with an alpha value, you'll have to supply its RGB or HSL values together with the alpha, as the only color values that allow you to specify an alpha component are rgba() and hsla(). You can't specify the alpha independently of the other color components.

See the CSS3 Color Module for details.

Tags:

Css