Modify alpha opacity of LESS variable
The site documentation gives the answer:
background: fade(@blue, 20%);
The function name is fade
not alpha
according to that document.
How do I apply opacity to a CSS color variable?
You can't take an existing color value and apply an alpha channel to it. Namely, you can't take an existing hex value such as #f0f0f0
, give it an alpha component and use the resulting value with another property.
However, custom properties allow you to convert your hex value into an RGB triplet for use with rgba()
, store that value in the custom property (including the commas!), substitute that value using var()
into an rgba()
function with your desired alpha value, and it'll just work:
:root {
/* #f0f0f0 in decimal RGB */
--color: 240, 240, 240;
}
body {
color: #000;
background-color: #000;
}
#element {
background-color: rgba(var(--color), 0.8);
}
<p id="element">If you can see this, your browser supports custom properties.</p>
Is it possible to change only the alpha of a rgba background colour on hover?
This is now possible with custom properties:
.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }
a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }
To understand how this works, see How do I apply opacity to a CSS color variable?
If custom properties are not an option, see the original answer below.
Unfortunately, no, you'll have to specify the red, green and blue values again for each individual class:
a { display: block; position: relative; }
.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }
.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }
You can only use the inherit
keyword alone as a value for the property, and even then the use of inherit
isn't appropriate here.
Is it possible to assign opacity to a SCSS hex color variable, re using that variable?
Here you go...
WRONG:
$first-with-opacity: rgba($color: $first-color, alpha: 0.05);
CORRECT:
$first-with-opacity: rgba($first-color, 0.05);
LESSCSS method with IE FIlter Alpha Opacity CSS
In dotless, do this. (I would NOT recommend script tags - they are ugly, language specific and not supported by dotless).
.opacity (@opacity) {
@opacityPercentage: @opacity * 100;
opacity: @opacity;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{opacityPercentage}))";
filter: ~"alpha(opacity = (@{opacityPercentage}))";
}
in dotless 1.2.3 (when it is released in a couple of weeks, or github head, you should be able to do this...
.opacity (@opacity) {
@opacityPercentage: @opacity * 100;
opacity: @opacity;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(@opacityPercentage));
filter: alpha(opacity = (@opacityPercentage));
}
and re: the comment from Mathletics, dotless is not "the worst compiler".. It matches less.js up to 1.1.5, soon to be 1.2.2 and many of the 600 bugs against less.js are fixed in dotless. You may have used dotless over 8 months ago, but things change and bugs are fixed... dotless also has better support for comments and variable scoping.
background opacity less mixin possible?
If I understand you correctly, then not in the sense that you are trying to do - @existing-bg would need to be able to assess the current BG colour at RUNTIME but essentially, we use LESS at compile time. The answer would be to put the colour (red) in a variable and supply the same variable in both places.
@existing: #ff0000;
div {
background-colour: @existing;
}
.opacity {
background-color: fade(@existing, 50%)
}
CSS opacity only to background color, not the text on it?
It sounds like you want to use a transparent background, in which case you could try using the rgba()
function:
rgba(R, G, B, A)
R (red), G (green), and B (blue) can be either
<integer>
s or<percentage>
s, where the number 255 corresponds to 100%. A (alpha) can be a<number>
between 0 and 1, or a<percentage>
, where the number 1 corresponds to 100% (full opacity).RGBa example
background: rgba(51, 170, 51, .1) /* 10% opaque green */
background: rgba(51, 170, 51, .4) /* 40% opaque green */
background: rgba(51, 170, 51, .7) /* 70% opaque green */
background: rgba(51, 170, 51, 1) /* full opaque green */
A small example showing how rgba
can be used.
As of 2018, practically every browser supports the rgba
syntax.
Programmatically add opacity to a color in Typescript
Well, if you program it, it is ...
function addAlpha(color: string, opacity: number): string {
// coerce values so ti is between 0 and 1.
const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
return color + _opacity.toString(16).toUpperCase();
}
addAlpha('FF0000', 1); // returns 'FF0000FF'
addAlpha('FF0000', 0.5); // returns 'FF000080'
Of course, you can improve this function by checking that color
has the proper format, by using regular expressions.
Related Topics
Bootstrap 3 - Change Dropdown Background Colour
@Font-Face Not Working on Wordpress Site
How to Give Differnet Background Color to Slider
Absolutely True Centred Background Image
Display Content Only on Mobile Devices
How to Change Background Color of Active Radio Button in React-Bootstrap
Style Button When: Active Different from: Hover
CSS3 Flexbox Adjust Height of Vertically Aligned Elements
Child Div Is Bigger Than Parent Div
Make Maven Serve Files Like CSS.Gz and Js.Gz
Break Long Word in a Div When Word-Wrap:Break-Word; Fails
Google Font Not Showing in Firefox
Equivalent to Text-Shadow in Ie
Make a Div Display Under Another Using CSS in a Totally Fluid Layout