如何将不透明度应用于CSS颜色变量？

Question

我正在设计一个电子应用程序,所以我可以访问CSS变量.我在一个颜色变量中定义了vars.css:

:root {
  --color: #f0f0f0;
}

我想使用这种颜色main.css,但应用了一些不透明度:

#element {
  background: (somehow use var(--color) at some opacity);
}

我该怎么做呢？我没有使用任何preprocesser,只有CSS.我更喜欢全CSS答案,但我会接受JavaScript/jQuery.

我无法使用,opacity因为我使用的背景图片不应该是透明的.

Answer 1

颜色混合

Caniuse 支撑桌

color-mix已经是得到良好支持的语法，可以进行大量控制：

html {
  font: 700 6em Arial;
  color: Salmon;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

AWESOME

html {
  background: repeating-linear-gradient(135deg, lightblue 0, lightblue 10%, transparent 0, transparent 50%);
  background-size: 3em 3em;

  display: grid;
  place-items: center;
  height: 100vh;
}

body::before, body::after {
  content: '';
  display: inline-block;
  padding: 10vw;
  border-radius: 50%;
}


body::before {
  --color: red;
  
  translate: 20% 0;
  background: color-mix(in srgb, var(--color) 70%, transparent);
}

body::after {
  --color: green;
  --transparency: 20%;
  --color-with-transparency: color-mix(in srgb, var(--color) var(--transparency, 100%), transparent);
  
  translate: -20% 0;
  background: var(--color-with-transparency);
}

相对颜色语法

Caniuse 支撑桌

借助允许颜色格式转换的新 CSS 功能 ( css-color-5 )，它还允许向任何格式的任何颜色添加不透明度，例如RGB（可以对任何其他格式进行相对转换）：

html { --color: blue }
.with-opacity { background: rgb(from var(--color) r g b / 50%) }

（截至撰写本文时，尚未在浏览器中提供。将在到达后更新）

Codepen 演示

Answer 2

您无法获取现有颜色值并应用Alpha通道.也就是说,您不能采用现有的十六进制值,例如#f0f0f0,给它一个alpha组件,并将结果值与另一个属性一起使用.

但是,自定义属性允许您将十六进制值转换为RGB三元组以供使用rgba(),将该值存储在自定义属性中(包括逗号!),将该值替换var()为rgba()具有所需alpha值的函数,并且它将会工作:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

这看起来好得令人难以置信.¹它是如何工作的？

奇妙之处在于一个事实,即自定义属性的值替换为是更换时var()在属性值中的引用,之前计算该属性的值.这意味着,只要自定义属性而言,价值--color在你的例子并不出彩价值可言,直到一个var(--color)表达式出现的地方,需要一个颜色值(也只有在这种情况下).从css-variables规范的2.1节:

自定义属性的允许语法非常宽松.<declaration-value>生成匹配一个或多个令牌的任何序列,只要序列不包含<bad-string-token>,<bad-url-token>,unmatched <) - token>,<] - 令牌>,或<} - 令牌>,或顶级<分号令牌>令牌或<delim-token>令牌,其值为"!".

例如,以下是有效的自定义属性:

--foo: if(x > 5) this.width = 10;

虽然这个值作为变量显然是无用的,因为它在任何普通属性中都是无效的,但它可能会被JavaScript读取并执行.

和第3节:

如果属性包含一个或多个var()函数,并且这些函数在语法上有效,则必须假定整个属性的语法在分析时有效.在替换var()函数之后,它仅在计算值时间进行语法检查.

这意味着在计算声明之前,240, 240, 240您在上面看到的值将直接替换为rgba()函数.所以这:

#element {
  background-color: rgba(var(--color), 0.8);
}

一开始似乎不是有效的CSS,因为rgba()期望不少于四个逗号分隔的数值,变为:

#element {
  background-color: rgba(240, 240, 240, 0.8);
}

当然,这是完全有效的CSS.

更进一步,您可以将alpha组件存储在自己的自定义属性中:

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}

并用相同的结果代替它:

#element {
  background-color: rgba(var(--color), var(--alpha));
}

这允许您具有不同的alpha值,您可以在运行中进行交换.

¹ _{好吧,如果您在浏览器中运行不支持自定义属性的代码段.}

Answer 3

我处于类似的情况，但不幸的是，给定的解决方案对我不起作用，因为变量可以是从rgb到hsl到hex甚至颜色名称的任何内容。
我现在解决了这个问题，通过将 thebackground-color和 theopacity应用于伪:after或:before元素：

.container {
    position: relative;
}

.container::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

样式可能需要稍作更改，具体取决于应应用背景的元素。
此外，它可能不适用于所有情况，但希望它在某些情况下有所帮助，而其他解决方案无法使用。

编辑： 我刚刚注意到，此解决方案显然也会影响文本颜色，因为它会在目标元素前面创建一个元素并对其应用透明背景色。
在某些情况下，这可能是一个问题。

Answer 4

我知道OP没有使用预处理器,但如果以下信息是答案的一部分,我会得到帮助(我还不能评论,否则我会评论@BoltClock答案.

如果您正在使用,例如scss,上面的答案将失败,因为scss尝试使用scss特定的rgba()/ hsla()函数编译样式,这需要4个参数.但是,rgba()/ hsla()也是本机css函数,因此可以使用字符串插值来绕过scss函数.

示例(在sass 3.5.0+中有效):

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}

<div></div>

请注意,字符串插值不适用于非CSS scss函数,例如lighten(),因为生成的代码不是函数CSS.它仍然是有效的scss,所以你不会在编译中收到任何错误.

Answer 5

您可以考虑color-mix()将您的颜色与透明颜色混合：

html {
  --color: #8A9B0F; /* the main color */
  
  /* adjust the percentage of transparency by changing the 25% */
  --new-color: color-mix(in srgb,var(--color),#0000 25%);
  
  /* to illustrate */
  background: linear-gradient(90deg,var(--color) 50%,var(--new-color) 0);
}

相关： https: //css-tip.com/color-shades-color-mix/

Answer 6

SCSS/SASS

优点：您可以只使用十六进制颜色值，而不是对每个通道使用 8 位 (0-255)。

这就是我最初的想法：https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

编辑：您还可以修改 alpha 函数以仅使用#{$color-name}-rgb并省略生成的 *-r、*-g、*-b CSS 变量。

结果

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Generated from the alpha function
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // OR (you wrote this yourself, see usage)
  color: rgba(var(--main-color-rgb), 0.5);
}

用法：

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // With alpha function:
  color: alpha(var(--main-color), 0.5);
  // OR just using the generated variable directly
  color: rgba(var(--main-color-rgb), 0.5);
}

Mixin 和函数

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}

Answer 7

如果您使用深色和浅色模式，我会使用此示例。我更喜欢将颜色和 RGB 颜色变量分配分开。所以我每个循环使用两个。我意识到这个解决方案不是干代码。如果你想干燥代码，你可以使用一个循环。

$colors-light: (
  white: #fff,
  black: #0c0d0e,
  orange: #f48024,
  green: #5eba7d,
  blue: #0077cc,
  red: #d1383d,
  red-100: #e2474c,
  red-200: red,
);

$colors-dark: (
  black: #fff,
  white: #2d2d2d,
  orange: #dd7118,
  green: #5eba7d,
  blue: #0077cc,
  red: #aa1c21,
  red-100: #c9292e,
  red-200: red,
);

@function hexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

@mixin generate_colors($colors) {
  // Colors
  @each $color, $value in $colors {
    @if str-slice(#{$value}, 1, 1) == "#" {
      --#{$color}: #{$value};
    } @else {
      --#{$color}: var(--#{$value});
    }
  }

  // RGB Colors
  @each $color, $value in $colors {
    @if str-slice(#{$value}, 1, 1) == "#" {
      --RGB_#{$color}: #{hexToRGB($value)};
    } @else {
      --RGB_#{$color}: var(--RGB_#{$value});
    }
  }
}

:root {
  @include generate_colors($colors-light);
}

[data-theme="dark"] {
  @include generate_colors($colors-dark);
}

干代码

@mixin generate_colors($colors) {
  // Colors, RGB Colors
  @each $color, $value in $colors {
    @if str-slice(#{$value}, 1, 1) == "#" {
      --#{$color}: #{$value};
      --RGB_#{$color}: #{hexToRGB($value)};
    } @else {
      --#{$color}: var(--#{$value});
      --RGB_#{$color}: var(--RGB_#{$value});
    }
  }
}

CSS 输出

:root {
  --white: #fff;
  --RGB_white: 255, 255, 255;
  --black: #0c0d0e;
  --RGB_black: 12, 13, 14;
  --orange: #f48024;
  --RGB_orange: 244, 128, 36;
  --green: #5eba7d;
  --RGB_green: 94, 186, 125;
  --blue: #0077cc;
  --RGB_blue: 0, 119, 204;
  --red: #d1383d;
  --RGB_red: 209, 56, 61;
  --red-100: #e2474c;
  --RGB_red-100: 226, 71, 76;
  --red-200: var(--red);
  --RGB_red-200: var(--RGB_red);
}

[data-theme="dark"] {
  --black: #fff;
  --RGB_black: 255, 255, 255;
  --white: #2d2d2d;
  --RGB_white: 45, 45, 45;
  --orange: #dd7118;
  --RGB_orange: 221, 113, 24;
  --green: #5eba7d;
  --RGB_green: 94, 186, 125;
  --blue: #0077cc;
  --RGB_blue: 0, 119, 204;
  --red: #aa1c21;
  --RGB_red: 170, 28, 33;
  --red-100: #c9292e;
  --RGB_red-100: 201, 41, 46;
  --red-200: var(--red);
  --RGB_red-200: var(--RGB_red);
}

body {
  background-color: var(--white);
}

.colors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 50px 0 0 30px;
}

.box {
  width: 100px;
  height: 100px;
  margin-right: 5px;
}

.black {
  background-color: var(--black);
}

.white {
  background-color: var(--white);
}

.orange {
  background-color: var(--orange);
}

.green {
  background-color: var(--green);
}

.blue {
  background-color: var(--blue);
}

.red {
  background-color: var(--red);
}

.red-200 {
  background-color: var(--red-200);
}

.black-rgba {
  background-color: rgba(var(--RGB_black), 0.5);
}

.white-rgba {
  background-color: rgba(var(--RGB_white), 0.5);
}

.orange-rgba {
  background-color: rgba(var(--RGB_orange), 0.5);
}

.green-rgba {
  background-color: rgba(var(--RGB_green), 0.5);
}

.blue-rgba {
  background-color: rgba(var(--RGB_blue), 0.5);
}

.red-rgba {
  background-color: rgba(var(--RGB_red), 0.5);
}

.red-rgba-200 {
  background-color: rgba(var(--RGB_red-200), 0.5);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <input type="checkbox" id="dark-switch" name="theme" />
      <label for="dark-switch">Dark / Light</label>
    </div>

    <div class="color-box">
        <div class="colors">
          <div class="box red-200"></div>
          <div class="box black"></div>
          <div class="box white"></div>
          <div class="box orange"></div>
          <div class="box green"></div>
          <div class="box blue"></div>
          <div class="box red"></div>
        </div>
        <br>

        <h1>RGBA</h1>
        <div class="colors">
          <div class="box red-rgba-200"></div>
          <div class="box black-rgba"></div>
          <div class="box white-rgba"></div>
          <div class="box orange-rgba"></div>
          <div class="box green-rgba"></div>
          <div class="box blue-rgba"></div>
          <div class="box red-rgba"></div>
        </div>

    </div>

    <script>
      const dark_switch = document.getElementById("dark-switch");

      dark_switch.addEventListener("change", (e) => {
        e.target.checked
          ? document.documentElement.setAttribute("data-theme", "dark")
          : document.documentElement.setAttribute("data-theme", "light");
      });
    </script>
  </body>
</html>

Answer 8

这是一个新答案：

使用cross-fade：

background-image: cross-fade(linear-gradient(0, red, red), linear-gradient(0, transparent, transparent), 0.5)

1. linear-gradient(0, red, red)你的颜色是图像吗
2. linear-gradient(0, transparent, transparent)是一个透明图像
3. 0.5是你需要配置的不透明度

旧答案（不推荐）：您可以使用linear-gradient破解颜色：

background: linear-gradient(to bottom, var(--your-color) -1000%, var(--mixin-color), 1000%)

$(() => {
  const setOpacity = () => {
    $('#canvas').css('--opacity', $('#opacity-value').val())
  }
  const setColor = () => {
    $('#canvas').css('--color', $('#color-value').val());
  }
  $('#opacity-value').on('input', setOpacity);
  $('#color-value').on('input', setColor);
  setOpacity();
  setColor();
})

#canvas {
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  --hack: 10000%;
  background: linear-gradient( to bottom, var(--color) calc((var(--opacity) - 1) * var(--hack)), transparent calc(var(--opacity) * var(--hack)));
}

#container {
  background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%), linear-gradient(-45deg, #b0b0b0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b0b0b0 75%), linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  padding: 10px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="canvas"></div>
</div>
<hr/>
<input type="range" id="opacity-value" min="0" max="1" step="0.1" value="0.5" />
<input type="color" id="color-value" />

Answer 9

这确实可以通过 CSS 实现。它只是有点脏，你必须使用渐变。我编写了一个小片段作为示例，请注意，对于深色背景，您应该使用黑色不透明度，至于浅色-白色背景。：

:root {
  --red: rgba(255, 0, 0, 1);
  --white-low-opacity: rgba(255, 255, 255, .3);
  --white-high-opacity: rgba(255, 255, 255, .7);
  --black-low-opacity: rgba(0, 0, 0, .3);
  --black-high-opacity: rgba(0, 0, 0, .7);
}

div {
	width: 100px;
	height: 100px;
	margin: 10px;
}
    
    
.element1 {
	background: 
        linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element2 {
	background: 
        linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}
    
.element3 {
	background: 
        linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element4 {
	background: 
        linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>