Sass - 将 Hex 转换为 RGBa 以获得背景不透明度答案

【问题标题】：Sass - Converting Hex to RGBa for background opacitySass - 将 Hex 转换为 RGBa 以获得背景不透明度
【发布时间】：2012-06-11 08:50:44
【问题描述】：

我有以下 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 的颜色将是 HEX 而不是 RGB。

我的示例用法是：

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

如何在这个 mixin 中使用 HEX 值？

【问题讨论】：

标签： css sass background-color mixins rgba

【解决方案1】：

rgba() function 可以接受单个十六进制颜色以及十进制 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
但是，#($color + $opacity) 的十六进制等价物是多少？ - 这可能有用。可行吗？
据我所知，RGBA 添加了 opacity，这意味着您可以看到其背后的元素。使用标准的hex，你不能这样做。
谢谢。从来没有想过在 rgba 上尝试十六进制！
最好像rgba(#000000, 0.6)一样使用rgba($color, $alpha)，因为结果是一样的，不需要重新发明轮子。 ;)

【解决方案2】：

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

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

金额应在0到1之间；

Official Sass Documentation (Module: Sass::Script::Functions)

【讨论】：

我喜欢这个！非常适合现代浏览器实现。
附带说明：$amount 是要减去的金额，而不是您要设置的值
工作得很好，除了数量似乎是你想让90%透明以获得结果.1
奇怪。没有阅读过文档的人不会怀疑有“透明化”功能。非常有帮助，谢谢！
很好的答案。这应该是公认的答案。谢谢。 $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5); 为我工作。

【解决方案3】：

SASS 有一个内置的rgba() function 来评估值。

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

【讨论】：

【解决方案4】：

你可以试试这个解决方案，是最好的... 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);

【讨论】：

您的回答很好，但似乎过于复杂。我猜透明阴影与我的问题无关，尽管您能解释一下透明背景类是什么吗？如果我不使用透明阴影混合，我假设我不需要它？
@RickDonohoe，据我所知，z-index：1，透明背景是 IE

【解决方案5】：

如果您需要混合来自可变和 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};

  }

}

【讨论】：