CSS Sass/Compass - 将十六进制、RGB 或命名颜色转换为 RGBA
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9270844/
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/Compass - Convert Hex, RGB, or Named Color to RGBA
提问by Pat Newell
This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color? Ideally, I would like the mixin to take any form of color definition, and apply transparency:
这可能是 Compass 101，但有没有人写过一个设置颜色 alpha 值的 mixin？理想情况下，我希望 mixin 采用任何形式的颜色定义，并应用透明度：
@include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 ); //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);
回答by maxbeatty
Use the rgbafunction built into Sass
Sets the opacity of a color.
Examples:
rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)Parameters:
(Color) color
(Number) alpha — A number between 0 and 1Returns:
(Color)
设置颜色的不透明度。
例子：
rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)参数：
(Color) color
(Number) alpha — 0 到 1 之间的数字退货：（
颜色）
Code:
代码：
rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
回答by Ilia Choly
I use the rgbapng compass plugin
rgbapng is a Compass plugin for providing cross-browser* compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.
rgbapng 是一个 Compass 插件，用于提供跨浏览器* 兼容的 RGBA 支持。它通过为不支持 RGBA 的浏览器动态创建单像素 alpha 透明 PNG 来工作。它使用纯 Ruby ChunkyPNG 库，安装和部署过程轻松自如。
Install
安装
gem install compass-rgbapng
Usage
用法
@include rgba-background(rgba(0,0,0,0.75));
Compiles to:
编译为：
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
回答by Carlos Martínez
The rgba function doesn't work on color with no transparency, it returns an hex again. After all, it's not meant to transform hex to rgba, we're just making profit out of hex doesn't allow alpha (yet).
rgba 函数对没有透明度的颜色不起作用，它再次返回一个十六进制。毕竟，这并不意味着将十六进制转换为 rgba，我们只是从十六进制中获利，但不允许 alpha（尚）。
rgba(#fff, 1) // returns #fff
So, I made al little functions that buils the rgb string. I don't need to deal with transparencies for now.
所以，我做了一些构建 rgb 字符串的小函数。我现在不需要处理透明胶片。
@function toRGB ($color) {
@return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
回答by mikespainhower
There's also ie-hex-str() for IE's ##AARRGGBB format:
还有 ie-hex-str() 用于 IE 的 ##AARRGGBB 格式：
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */
回答by user776411
from_hex(hex_string, alpha = nil);
From the documentation:
从文档：
Create a new color from a valid CSS hex string. The leading hash is optional.
从有效的 CSS 十六进制字符串创建新颜色。前导哈希是可选的。
