关于css：Sass / Compass-将十六进制，RGB或命名的颜色转换为RGBA

Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

这可能是Compass 101，但是有人写过mixin来设置颜色的alpha值吗？理想情况下，我希望mixin采用任何形式的颜色定义并应用透明度：

1
2
3

@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);

使用Sass内置的rgba函数

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€" A number between 0 and 1

Returns:
(Color)

代码：

1	rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);

相关讨论

rgba函数不能在没有透明度的颜色上使用，它会再次返回十六进制。毕竟，这并不意味着要将十六进制转换为rgba，我们只是从十六进制中获利，尚不允许使用alpha(尚未)。

1	rgba(#fff, 1) // returns #fff

因此，我做了一些小功能来构建rgb字符串。我暂时不需要处理透明胶片。

1
2
3

@function toRGB ($color) {
@return"rgb(" + red($color) +"," + green($color) +"," + blue($color)+")";
}

我使用了rgbapng指南针插件

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.

安装

1	gem install compass-rgbapng

用法

1	@include rgba-background(rgba(0,0,0,0.75));

编译为：

1 2	background: url('/images/rgbapng/000000bf.png?1282127952'); background: rgba(0, 0, 0, 0.75);