Using LESS, I know that I can change the saturation or tint of a color variable. That looks like this:
background: lighten(@blue, 20%);
I want to change the alpha opacity of my color, though. Preferably like this:
background: alpha(@blue, 20%);
Is there a simple way to do this in LESS?
To adjust layer opacity:Select the desired layer, then click the Opacity drop-down arrow at the top of the Layers panel. Click and drag the slider to adjust the opacity. You'll see the layer opacity change in the document window as you move the slider.
Simply use rgba to define your background color and specify opacity with it at the same time by adjusting the last value, for alpha, in your rgba code. For scaling, bringing the value closer to 0 increases transparency. To simplify your HTML, you don't even need the parent div around your block of text to do this.
The opacity-level describes the transparency-level, where 1 is not transparant at all, 0.5 is 50% see-through, and 0 is completely transparent. Alpha Channel RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.
Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.
The site documentation gives the answer:
background: fade(@blue, 20%);
The function name is fade
not alpha
according to that document.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With