设置不透明度时如何从currentColor继承颜色？

Question

是否有一种方法可以更改边框的不透明度，该边框被设置为从

currentColor

继承其颜色？ IE。继承

currentColor

中的

#inner2

并将其不透明度设置为

0.25

。

请寻找纯 CSS 解决方案。

例如，类似于以下内容：

#outer{
  color: rgba(255,0,0,1);
}

.inner{
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid currentColor;
}

#inner2{
  /* This is where I want to inherit current color */
  /* ... but still set it to 0.25 opacity */
  border-color: rgba(255,0,0,0.25);
}

<div id='outer'>
  <div id='inner1' class='inner'></div>
  <div id='inner2' class='inner'></div>
</div>

Answer 1

颜色混合

👀 犬用支撑桌

color-mix

可用于将

currentColor

与其他颜色混合（如

transparent

）：

html {
  display: grid;
  place-items: center;
  height: 100vh;
  box-sizing: border-box;
  font: 700 6em Arial;
  
  /* actual fun: */
  color: Salmon;
  background: color-mix(in srgb, currentColor 20%, transparent);
  border: 20px solid color-mix(in srgb, currentColor 50%, transparent);
}

AWESOME

---

之前的回答：

您将

currentColor

值与

inherit

（即 默认）混淆了。您不使用

currentColor

作为

border

属性，因为它是

border

的默认值。

#inner1

和

#inner2

都继承自最近的父级，该父级设置了颜色（红色），并且边框默认使用该颜色。

无论颜色的来源如何，以下解决方案都将在 100% 的情况下工作
（内联

style

属性、外部 CSS 或远祖继承）：

#outer{ color:red; }
#inner1, #inner2{ 
    padding: 2em; 
    margin-top: 1em;  
}
#inner1{ border:5px solid; } 

#inner2{ position:relative; }

#inner2::before{  
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  border:5px solid;
  opacity:.5;
}

<div id='outer'>
  <div id='inner1'>inner 1</div>
  <div id='inner2'>inner 2</div>
</div>

另外，请参阅我的其他答案，它使用了前沿语法。

Answer 2

您可以使用 css-variables 来实现类似的行为：

#outer{
  --border-r: 255;
  --border-g: 0;
  --border-b: 0;
  color: rgba(var(--border-r),var(--border-g),var(--border-b),1);
}

.inner{
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid;
}

#inner2{
  color: rgba(var(--border-r),var(--border-g),var(--border-b),0.25);
}

<div id='outer'>
  <div id='inner1' class='inner'></div>
  <div id='inner2' class='inner'></div>
</div>

Answer 3

您现在可以使用

color-mix

函数以更直接的方式实现此目的，至少在现代浏览器中（自 2023 年 5 月起的“基线”）。

示例：

#outer {
  color: rgba(255,0,0,1);
}

.inner {
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid currentColor;
}

#inner2 {
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}

<div id='outer'>
  <div id='inner1' class='inner'></div>
  <div id='inner2' class='inner'></div>
</div>

您可以选择颜色空间（我在这里为您选择了SRGB）以及混合比例。如果省略比例，则默认为 50%。

但是请注意，如果当前颜色已经部分透明，这将使其变得“更透明”；这不会取代阿尔法通道。为此，我们需要等待相对颜色（CSS颜色级别5的另一部分）。

Answer 4

:root {
  --color-r: 0;
  --color-g: 0;
  --color-b: 0;
  --color-a: 1;
}

[class*=-color] {
  color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--color-a));
}

[class*=-background] {
  --background-r: var(--color-r);
  --background-g: var(--color-g);
  --background-b: var(--color-b);
  --background-color-a: var(--color-a);
  background-color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--color-a));
}

[class*=dark] {
  --color-r: 0;
  --color-g: 0;
  --color-b: 0;
}

[class*=light] {
  --color-r: 255;
  --color-g: 255;
  --color-b: 255;
}

[class*=primary] {
  --color-r: 200;
  --color-g: 2;
  --color-b: 33;
}

[class*=secondary] {
  --color-r: 102;
  --color-g: 102;
  --color-b: 102;
}

[class*="--alpha-0"], [class*="--alpha-00"] {
  --color-a: 0;
}

[class*="--alpha-10"] {
  --color-a: .1;
}

[class*="--alpha-20"] {
  --color-a: .2;
}

[class*="--alpha-30"] {
  --color-a: .3;
}

[class*="--alpha-40"] {
  --color-a: .4;
}

[class*="--alpha-50"] {
  --color-a: .5;
}

[class*="--alpha-60"] {
  --color-a: .6;
}

[class*="--alpha-70"] {
  --color-a: .7;
}

[class*="--alpha-80"] {
  --color-a: .8;
}

[class*="--alpha-90"] {
  --color-a: .9;
}

[class*="--alpha-100"] {
  --color-a: 1;
}