Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modify alpha opacity of LESS variable

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?

like image 913
ben Avatar asked Oct 07 '12 17:10

ben


People also ask

How do you change opacity level?

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.

How do I change the opacity of text without affecting it?

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.

What is the difference between alpha and opacity?

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.

How do you change the opacity of a color?

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.


1 Answers

The site documentation gives the answer:

background: fade(@blue, 20%); 

The function name is fade not alpha according to that document.

like image 101
ScottS Avatar answered Oct 13 '22 09:10

ScottS