Question

我无法在公司CMS中更改CSS颜色变量，这些颜色变量以6位十六进制值编写。我可以仅使用CSS使用这些变量来获得预定义颜色值的浅色阴影吗？

编辑：我仍然需要颜色来引用变量。我正在为CMS上托管的不同站点构建模板化页面，并且不同站点为--primary，-secondary等变量设置了不同的颜色。因此，我不能直接对模板进行静态RGB值转换，因为它需要能够无缝复制并粘贴到不同的站点。

我的公司使用专有的CMS，该CMS以六位数的十六进制值定义颜色值（-主要，-次要，-中性，-强调）。我不能改变那些。我正在尝试将背景色定义为中性色的50％。

不幸的是，我不太了解如何使用javascript或jquery。自从我知道如何使用.changeClass以外的其他东西以来，已经过去了很长时间。那并不意味着我不能，只是我不知道除了复制和粘贴外还要做更多的事情。

所以理想情况下，我正在寻找一个简单的CSS修复程序，但是如果我必须在页面中复制并粘贴一行，我绝对可以。

<style>
:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  background-color: rgba( var(--neutral), .5); /* Since my values are in hex, I can't use the rgba() function thing */
}

</style>

如果有一个简单的脚本，我可以复制并粘贴到我的页面中，它将--neutral转换为rgb值并将该值定义为--neutral-rgb或类似的东西，我可以使用它。我只是对自己的脚本编写/理解能力不自信。

或者，如果有话可以说：

background-color: hsl( var(--neutral) + "f0");

或

background-color: calc( var(--neutral) * (50%));

那太好了...

P.S。如果这个问题以前已经回答过，请不要把我钉在十字架上。我不确定如何正确表达。我在业余时间一直在教自己Sass，所以我才刚刚开始了解这些东西。

非常感谢！

Answer 1

如果仅是背景，请在背景上使用额外的一层以应用不透明度：

:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  position:relative;
  z-index:0;
}
.one {
  --c:var(--neutral);
  --o:0.8;
}
.two {
  --c:var(--primary);
  --o:0.2;
}
.wrapper:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: var(--c,transparent);
  opacity:var(--o,1);
}

<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>

您甚至可以应用filter并可以根据需要更改初始颜色：

:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  position:relative;
  z-index:0;
}
.one {
  --c:var(--neutral);
  --o:0.8;
  --f:brightness(20%);
  color:#fff;
}
.two {
  --c:var(--primary);
  --o:0.2;
  --f:hue-rotate(130deg);
}
.wrapper:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: var(--c,transparent);
  opacity:var(--o,1);
  filter:var(--f,none);
}

<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>

我使用的CMS以十六进制值定义颜色变量。有没有一种方法可以使用CSS将变量值转换为该颜色的浅色阴影？

1 个答案: