Sass - 将十六进制转换为RGBa以设置背景透明度

Question

我有以下的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);
}

我该如何在这个mixin中使用16进制值？

- Rick Donohoe

Answer 1

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" */

- hopper

---

我发誓我尝试过使用r、b、g函数，但它们都没有起作用。不过，我当时正在使用Drupal后端的动态颜色，这可能导致了一些问题。最终，我还是解决了这个问题，并在进一步研究后找到了答案。+1 - Rick Donohoe

但是，#($color + $opacity)的十六进制等价物是什么？-这可能很有用。可行吗？ - somedirection

据我所知，RGBA 添加了 透明度，这意味着您可以看到它后面的元素。使用标准的 hex，您无法做到这一点。 - Richard Peck

谢谢。我从来没有想过在rgba上尝试十六进制！ - RayViljoen

最好使用 rgba($color, $alpha)，例如 rgba(#000000, 0.6)，因为结果相同，而且没有必要重新发明轮子。 ;) - lbartolic

我尝试了一些关于box-shadow的方法，但是它没有起作用，你能给我一些建议吗？ - undefined

Answer 2

有一个内置的混合器：transparentize($color, $amount);

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

数值应该在 0 到 1 之间;

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

- user3631047

---

我喜欢这个！非常适合现代浏览器的实现。 - Mike Kormendy

顺便提一下：$amount 是要减去的数额，而不是您想设置的值。 - MMachinegun

除了数量似乎与所需的相反意思外，表现很好，您想要使其90％透明以获得结果.1。 - Patrick Mencias-lewis

很奇怪，如果没有阅读文档，没有人会怀疑存在一个“透明化”函数。虽然非常有帮助，谢谢！ - tobybot

很棒的答案。这应该是被采纳的答案。谢谢。$colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5); 对我有用。 - Ryan

Answer 3

使用SASS内置的rgba()函数。

rgba($color, $alpha)

例如

rgba(#00aaff, 0.5) // Output: rgba(0, 170, 255, 0.5)

一个使用您自己的变量的示例：

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

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

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

引用SASS文档中的内容：

透明化函数transparentize() function通过固定数值减少alpha通道的值，这往往不是期望的效果。

- Reggie Pinkham

Answer 4

您可以尝试这个解决方案，它是最好的... 链接(github)

// Transparent Background
// From: https://dev59.com/WGw05IYBdhLWcg3w_Gyw

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

- m.Elouafi

---

你的答案很好，但似乎过于复杂。我猜透明色调对我的问题不相关，但你能解释一下透明背景类是什么吗？如果我不使用透明色调 mixin，我认为我不需要它，是吗？ - Rick Donohoe

@RickDonohoe，就我所记得的，z-index: 1和透明背景是IE<9的后备方案。我认为m.Eloutafi将其放入了单独的类中，以便在其他需要时进行进一步使用。请注意答案中以“From:”开头的行... - Roman M. Koss

Answer 5

如果您需要混合变量和透明度颜色，并且使用包含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};

  }

}

- Vojtech

Answer 6

您可以使用 PostCSS 和它的 postcss-rgb 插件，该插件使 rgba() 规则支持十六进制格式：arpadHegedus/postcss-rgb

- Jean Claveau