Sass-将十六进制转换为RGBa以实现背景不透明度


213

我有以下Sass mixin,它是RGBa示例的一半完整修改:

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
} 

我已经申请了$opacity确定,但现在我对这个$color零件感到困惑。我将发送到mixin的颜色将是十六进制而不是RGB。

我的示例用法是:

element {
    @include background-opacity(#333, .5);
}

如何在此混合中使用十六进制值?

Answers:


414

RGBA()函数可以接受单个十六进制颜色以及小数RGB值。例如,这可以正常工作:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

但是,如果您需要将十六进制颜色分解为RGB分量,则可以使用red()green()blue()函数来实现:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

我发誓我尝试过此功能以及r,b,g函数,但它不起作用。我使用的是Drupal后端的动态颜色,但可能会损坏某些东西。尽管如此,仍将其排在最后,进一步研究后我找到的答案是+1
Rick Donohoe 2012年

1
但是,#($ color + $ opacity)的十六进制等效项是什么?-这可能很有用。可行吗?
somedirection 2014年

2
据我所知,RGBA添加了opacity,这意味着您可以看到其背后的元素。使用standard hex,您不能执行此操作。
理查德·佩克

谢谢。永远不会想到在rgb a 上尝试十六进制!
RayViljoen '17

2
更好地使用rgba($color, $alpha)rgba(#000000, 0.6)因为结果是一样的,并且不需要重新发明轮子。;)
lbartolic

118

有一个内置的mixin: transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

数量应在0到1之间;

Sass官方文档(模块:Sass :: Script :: Functions)


1
我喜欢这个!非常适合现代浏览器实现。
Mike Kormendy 2015年

16
附带说明:$ amount是减去的金额,而不是您要设置的值
MMachinegun 2015年

3
效果很好,只是数量似乎是相反的意思,您想使其90%透明以得到结果.1
Patrick Mencias-lewis 2015年

怪异的 没有阅读过文档的人不会怀疑有“透明化”功能。很有帮助,谢谢!
tobybot

好答案。这应该是公认的答案。谢谢。$colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);为我工作。
瑞安

34

SASS具有内置的rgba()函数来评估值。

rgba($color, $alpha)

例如

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

使用您自己的变量的示例:

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

输出:

.my-element {
  color: rgba(0, 170, 255, 0.5);
}

6

您可以尝试此解决方案,是最好的... url(github

// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

// Extend this class to save bytes
.transparent-background {
  background-color: transparent;
  zoom: 1;
}

// The mixin
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  @extend .transparent-background;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}

// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
  @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
    .#{$name}-#{$alpha} {
      @include transparent($color, $alpha / 100);
    }
  }
}

// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);

5
您的回答很好,但似乎不必要地复杂。我猜透明阴影与我的问题无关,尽管您可以解释透明背景类的含义吗?我想如果我不使用透明阴影的mixin就不需要它了吗?
里克·多诺霍

@RickDonohoe,据我所记得,z-index:1,透明背景是IE <9的后备。我认为Eloutafi先生将其放在单独的类中,以备将来其他需要。观看答案中以“ From:”开头的行……
Roman M. Koss

2

如果您需要混合使用变量透明度和Alpha透明度的颜色,并且使用包含rgba()函数的解决方案,则会出现如下错误:

      background-color: rgba(#{$color}, 0.3);
                       ^
      $color: #002366 is not a color.
   
          background-color: rgba(#{$color}, 0.3);
                            ^^^^^^^^^^^^^^^^^^^^

这样的事情可能有用。

$meeting-room-colors: (
  Neumann: '#002366',
  Turing: '#FF0000',
  Lovelace: '#00BFFF',
  Shared: '#00FF00',
  Chilling: '#FF1493',
);
$color-alpha: EE;

@each $name, $color in $meeting-room-colors {

  .#{$name} {

     background-color: #{$color}#{$color-alpha};

  }

}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.