95

这可能是 Compass 101，但是有没有人写过一个 mixin 来设置颜色的 alpha 值？理想情况下，我希望 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);
4

6 回答 6

189

使用rgbaSass 内置的函数

设置颜色的不透明度。

例子：

rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(蓝色, 0.2) => rgba(0, 0, 255, 0.2)

参数：
(Color) color
(Number) alpha - 0 到 1 之间的数字

退货：（
颜色）

代码：

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
于 2012-02-14T18:51:53.577 回答
11

rgba 函数不适用于没有透明度的颜色，它再次返回一个十六进制。毕竟，这并不是要将 hex 转换为 rgba，我们只是从 hex 中获利，还不允许 alpha。

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

因此，我制作了一些构建 rgb 字符串的小函数。我现在不需要处理透明胶片。

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
于 2019-02-18T15:14:54.133 回答
8

我使用rgbapng 指南针插件

rgbapng 是一个 Compass 插件，用于提供跨浏览器* 兼容的 RGBA 支持。它通过为不支持 RGBA 的浏览器动态创建单像素 alpha 透明 PNG 来工作。它使用纯 Ruby ChunkyPNG 库，可轻松安装和部署。

安装

gem install compass-rgbapng

用法

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

编译为：

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
于 2012-02-14T18:58:53.857 回答
2

还有 ie-hex-str() 用于 IE 的 ##AARRGGBB 格式：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */
于 2013-06-20T03:59:25.317 回答
2 
from_hex(hex_string, alpha = nil);

从文档中：

从有效的 CSS 十六进制字符串创建新颜色。前导哈希是可选的。

于 2014-07-15T14:00:24.933 回答
0

SASSscale-color()将以灵活的方式做到这一点：例如color: #{scale-color( $primary, $alpha: -50% )};. 完整参考这里。

请注意，如果初始颜色（$primary在本例中）是纯色（没有透明度），则该$alpha值必须为负值（最大为-100%）才能添加透明度。

于 2022-01-11T23:13:17.737 回答