CSS 如何使用 Less 编译器将十六进制颜色转换为 rgba？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14860874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I convert a hexadecimal color to rgba with the Less compiler?
提问by chubbyk
I have the following code:
我有以下代码：
@color : #d14836;
.stripes span {
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
to(transparent));
I need to convert @colorto rgba(209, 72, 54, 1).
我需要转换@color为rgba(209, 72, 54, 1).
So I need to replace rgba(209, 72, 54, 1)in my code with a Less function that generates an rgba()value from my @colorvariable.
所以我需要rgba(209, 72, 54, 1)用一个 Less 函数替换我的代码，该函数rgba()从我的@color变量生成一个值。
How can I do this with Less?
我怎样才能用 Less 做到这一点？
回答by Ronald Pauffert
Actually, the Less language comes with an embedded function called fade. You pass a color object and the absolute opacity % (higher value means less transparent):
实际上，Less 语言带有一个名为fade. 您传递一个颜色对象和绝对不透明度 %（更高的值意味着更不透明）：
fade(@color, 50%); // Return @color with 50% opacity in rgba
回答by Sebastian Stiehl
If you don't need an alpha key, you can simply use the hexadecimal representation of the color. An rgba color with a alpha of '1' is the same as the hexadecimal value.
如果您不需要 alpha 键，您可以简单地使用颜色的十六进制表示。alpha 为“1”的 rgba 颜色与十六进制值相同。
Here are some examples to demonstrate that:
以下是一些示例来证明这一点：
@baseColor: #d14836;
html {
color: @baseColor;
/* color:#d14836; */
}
body {
color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
/* color:#d14836; */
}
div {
color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
/* rgba(209, 72, 54, 0.5); */
}
span {
color: fade(@baseColor, 50%);
/* rgba(209, 72, 54, 0.5); */
}
h3 {
color: fade(@baseColor, 100%)
/* color:#d14836; */
}
Test this code online: http://lesstester.com/
在线测试此代码：http: //lesstester.com/
回答by helpse
My Less mixin:
我的少混合：
.background-opacity(@color, @opacity) {
@rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);
background-color: @rgba-color;
// Hack for IE8:
background: none; // Only Internet Explorer 8
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
// Problem: Filter gets applied twice in Internet Explorer 9.
// Solution:
&:not([dummy]) {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
}
}
Try it.
尝试一下。
EDITED: As seen on rgba background with IE filter alternative: IE9 renders both!, I added some lines to the mixin.
编辑：如在带有 IE 过滤器替代品的 rgba 背景上所见：IE9 呈现两者！，我在 mixin 中添加了一些行。
回答by Dmitry Davydov
It seems that with the recent Less update 3.81, you can use just two arguments in the rgba() function.
似乎在最近的 Less 更新3.81 中，您只能在 rgba() 函数中使用两个参数。
rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)
It works for me, but I can't find it in the official documentation.
它对我有用，但我在官方文档中找不到它。
