CSS Sass - 将十六进制转换为 RGBa 以获得背景不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10929458/
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
Sass - Converting Hex to RGBa for background opacity
提问by Rick Donohoe
I have the following Sass mixin, which is a half complete modification of an RGBa example:
我有以下 Sass mixin，这是对RGBa 示例的半完整修改：
@mixin background-opacity($color, $opacity: .3) {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, $opacity);
}
I have applied $opacityok, but now I am a stuck with the $colorpart.
The colors I will be sending into the mixin will be HEX not RGB.
我已经申请$opacity好了，但现在我对这$color部分感到困惑。我将发送到 mixin 的颜色将是 HEX 而不是 RGB。
My example use will be:
我的示例用途是：
element {
@include background-opacity(#333, .5);
}
How can I use HEX values within this mixin?
如何在此 mixin 中使用 HEX 值？
回答by hopper
The rgba() functioncan accept a single hex color as well decimal RGB values. For example, this would work just fine:
的RGBA（）函数可以接受单个十六进制颜色以及小数RGB值。例如，这可以正常工作：
@mixin background-opacity($color, $opacity: 0.3) {
background: $color; /* The Fallback */
background: rgba($color, $opacity);
}
element {
@include background-opacity(#333, 0.5);
}
If you ever need to break the hex color into RGB components, though, you can use the red(), green(), and blue()functions to do so:
但是，如果您需要将十六进制颜色分解为 RGB 分量，则可以使用red()、green()和blue()函数来执行此操作：
$red: red($color);
$green: green($color);
$blue: blue($color);
background: rgb($red, $green, $blue); /* same as using "background: $color" */
回答by user3631047
There is a builtin mixin: transparentize($color, $amount);
有一个内置的mixin： transparentize($color, $amount);
background-color: transparentize(#F05353, .3);
The amount should be between 0 to 1;
数量应在 0 到 1 之间；
Official Sass Documentation (Module: Sass::Script::Functions)
回答by Reggie Pinkham
SASS has a built-in rgba() functionto evaluate values.
SASS 有一个内置的rgba() 函数来计算值。
rgba($color, $alpha)
E.g.
例如
rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)
An example using your own variables:
使用您自己的变量的示例：
$my-color: #00aaff;
$my-opacity: 0.5;
.my-element {
color: rgba($my-color, $my-opacity);
}
Outputs:
输出：
.my-element {
color: rgba(0, 170, 255, 0.5);
}
回答by m.Elouafi
you can try this solution, is the best... url(github)
你可以试试这个解决方案，是最好的... url( github)
// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8
// Extend this class to save bytes
.transparent-background {
background-color: transparent;
zoom: 1;
}
// The mixin
@mixin transparent($color, $alpha) {
$rgba: rgba($color, $alpha);
$ie-hex-str: ie-hex-str($rgba);
@extend .transparent-background;
background-color: $rgba;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}
// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
@each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
.#{$name}-#{$alpha} {
@include transparent($color, $alpha / 100);
}
}
}
// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);
回答by Vojtech
If you need to mix colour from variable and alpha transparency, and with solutions that include rgba()function you get an error like
如果您需要从变量和 alpha 透明度混合颜色，并且使用包含rgba()函数的解决方案，您会收到类似的错误
background-color: rgba(#{$color}, 0.3);
^
$color: #002366 is not a color.
?
│ background-color: rgba(#{$color}, 0.3);
│ ^^^^^^^^^^^^^^^^^^^^
Something like this might be useful.
像这样的东西可能会有用。
$meeting-room-colors: (
Neumann: '#002366',
Turing: '#FF0000',
Lovelace: '#00BFFF',
Shared: '#00FF00',
Chilling: '#FF1493',
);
$color-alpha: EE;
@each $name, $color in $meeting-room-colors {
.#{$name} {
background-color: #{$color}#{$color-alpha};
}
}
