Sass / Compass - 将Hex,RGB或命名颜色转换为RGBA

时间:2012-02-14 02:19:55

标签: css sass compass-sass rgba

这可能是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);

5 个答案:

答案 0 :(得分:165)

使用rgba function built into Sass

  

设置颜色的不透明度。

     

示例:

     

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

     

参数:
  (颜色)颜色
  (数字)alpha - 介于0和1之间的数字

     

返回:
  (彩色)

代码:

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

答案 1 :(得分:8)

我使用rgbapng compass plugin

  

rgbapng是一个用于提供跨浏览器*兼容的Compass插件   RGBA支持。它的工作原理是创建单像素alpha透明PNG   适用于不支持RGBA的浏览器。它使用纯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);

答案 2 :(得分:2)

IE的## AARRGGBB格式也有ie-hex-str():

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

答案 3 :(得分:2)

from_hex(hex_string, alpha = nil);

来自documentation

  

从有效的CSS十六进制字符串创建一种新颜色。领先的哈希是   可选的。

答案 4 :(得分:1)

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

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

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

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