具有 CSS 颜色模块级别 4 的 color() 函数的 Alpha 通道

Question

我正在试验 Sass @mixin，它为 display-p3 color-space 提供支持，并在不支持 display-p3 时优雅地退化回 sRGB ].目前只有 Safari 支持此规范。

@mixin color-spaces($property, $color) {
  $red: red($color);
  $green: green($color);
  $blue: blue($color);
  $alpha: alpha($color);

  @if $alpha == 1 {
    #{$property}: rgb($red, $green, $blue);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255));
  } @else {
    #{$property}: rgba($red, $green, $blue, $alpha);
    #{$property}:
      rgba(
        color(display-p3 ($red / 255) ($green / 255) ($blue / 255)),
        $alpha
      );
  }
}

在上面的 @mixin 中，我假设我能够将 color() 函数作为参数传递给 rgba() 函数，如果颜色需要 alpha -渠道。下面是一些示例用法：

// Declarations
.foo {
  @include color-spaces(background-color, #ff0);
  @include color-spaces(color, rgb(255, 0, 100));
}

.bar {
  @include color-spaces(border-color, #ffff);
  @include color-spaces(color, rgba(0, 80, 160, 0.5));
}

// Results
.foo {
  background-color: #ff0;
  background-color: color(display-p3 1 1 0);
  color: rgb(255, 0, 100);
  color: color(display-p3 1 0 0.39216);
}
.bar {
  border-color: #ffff;
  border-color: rgba(color(display-p3 1 1 1), 1);
  color: rgba(0, 80, 160, 0.5);
  color: rgba(color(display-p3 0 0.31373 0.62745), 0.5);
}

我的假设是错误的。将 color() 函数作为参数传递给 rgba() 参数是无效的。我也无法将第四个数字参数传递给 color() 函数。它只接受三个。

在这种情况下，使用 opacity 属性作为替代方案也不是一个合理的解决方案。将不透明度值传递给相关选择器将影响所有子元素的不透明度。

我很欣赏这是相当新的和实验性的。但是，有谁知道我可以将 alpha 通道与 color() 函数结合使用以实现 display-p3 颜色 space 的透明度的方法？？？

Answer 1

我找到了这个问题的答案。我会 post 给出答案，以防将来随着此规范变得越来越普遍，它可以帮助某人。

似乎那里有相互矛盾的信息... color() 函数能够接受第四个参数（对于 alpha-channel）。这个有用 CSS Tricks article by Ollie Williams 解释得很好。

正确的语法如下：

color(display-p3 1 0 0 / 50%);

虽然这些是不同的颜色空间，但这大致相当于：

rgba(255, 0, 0, 0.5);

这意味着我可以通过完全删除第二个 rgba() 函数调用来更新我的 @mixin，并且仅依靠 color() 函数在上下文需要它：

@mixin color-spaces($property, $color) {
  $red: red($color);
  $green: green($color);
  $blue: blue($color);
  $alpha: alpha($color);

  @if $alpha == 1 {
    #{$property}: rgb($red, $green, $blue);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255));
  } @else {
    #{$property}: rgba($red, $green, $blue, $alpha);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255) unquote('/') ($alpha * 100%));
  }
}

具有 CSS 颜色模块级别 4 的 color() 函数的 Alpha 通道

Alpha channels with CSS Color Module Level 4's color() function

css

rgb

sass

colors

srgb