Sass/Compass - 将十六进制、RGB或命名颜色转换为RGBA

Question

这可能是Compass的入门知识，但有没有人写过一个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);

- Pat Newell

Answer 1

使用内置于Sass中的rgba函数

设置颜色的透明度。

示例：

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之间的数字

返回值：
(Color)

代码：

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

- maxbeatty

---

@Jon，你能详细说明一下我的回答有哪些不清楚的地方吗？这样我就可以改进它了。 - maxbeatty

@maxbeatty 我不确定我的评论发生了什么事，但我对 " ==>" 感到困惑......回过头来看似乎很明显了，但当你感到迷失时，很难区分所需的代码和注释。我猜可以通过只在代码块中包含实际可用的代码来使其更清晰明了。 - jon

@jon 这个引用块直接来自 Sass 文档。我认为除了链接到相关的内置函数之外，包含相关文档也会很有帮助。抱歉这让你感到困惑。 - maxbeatty

请注意，如果您使用 alpha 值为 255，则此方法无效。rgba(#123456, 255) 的结果是 #123456，不会将颜色转换为 rgba 格式。 - Axel Montini

更语义化的方法是使用change-color()（文档），例如：change-color(red, $alpha: 0.5)。请注意，这将设置 alpha 值为50%（如果要增加或减少已经具有一定透明度的颜色的 alpha 值，请使用 scale-color 函数，该函数接受一个百分比）。这是我首选的符号表示法，因为我不喜欢使用 RGB 进行设计。 - Fabien Snauwaert

Answer 2

rgba 函数对不带透明度的颜色无效，它返回一个十六进制值。毕竟，它的目的不是将十六进制转换为 rgba，我们只是利用十六进制不允许 alpha（尚未）。

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

所以，我编写了一些小函数来构建RGB字符串。现阶段我不需要处理透明度。

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

- Carlos Martínez

Answer 3

我使用rgbapng compass插件。

rgbapng是一个Compass插件，用于提供跨浏览器*兼容的RGBA支持。它通过为不支持RGBA的浏览器即时创建单个像素的透明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);

- Ilia Choly

Answer 4

此外，还有ie-hex-str()函数用于IE的##AARRGGBB格式：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */

- mikespainhower

Answer 5

from_hex(hex_string, alpha = nil);

根据文档：

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

- user776411

---

链接已经失效了 :-( 我收到了404错误。 - KargWare

Answer 6

SASS的scale-color()函数可以以灵活的方式进行此操作，例如：color: #{scale-color($primary, $alpha: -50%)};。完整参考文档在此。请注意，如果初始颜色（本例中的$primary）是纯色（没有透明度），则$alpha值必须为负数（高达-100%）才能添加透明度。

- Martin_W

Answer 7

在我的情况下，rgba不允许使用十六进制。

因此，我使用transparentize来降低alpha通道。

.blue-background {
  background: transparentize(var.$color-my-blue, .8);
}

- yeop

---

这个答案应该排在前面。透明化是唯一对我有效的解决方案。 - Tesla

这个答案应该排得更靠前。Transparentise 是唯一对我有效的解决方案。 - Tesla