我使用的CMS以十六进制值定义颜色变量.有没有一种方法可以使用CSS将变量值转换为该颜色的较浅阴影? [英] The CMS I use defines color variables in hex values. Is there a way to convert that variable value to a lighter shade of that color using CSS?

问题描述

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

I can't change the CSS color variables in my company's CMS, which are written in 6-digit hex values. Can I use those variables to get a lighter shade of the predefined color value using just CSS?

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

I still need the color to refer to the variable. I'm building a templated page for different sites hosted on our CMS and different sites have different colors set for the --primary, --secondary, etc variables. So I can't outright just go put a static RGB value conversion for the template since it needs to be able to seamlessly be copied and pasted into the different sites.

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

My company uses a proprietary CMS that defines color values (--primary, --secondary, --neutral, --accent) in six-digit hex values. I can't change those. I am trying to define a background color as 50% of the neutral color.

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

Unfortunately, I'm not well versed on how to use javascript or jquery. It's just been a long, long time since I knew how to use anything other than .changeClass. That doesn't mean I can't, it's just I don't know how to do much more than copying and pasting.

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

So ideally I'm looking for a simple CSS fix to this, but if I have to copy and paste a line in my page, I absolutely can.

<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或类似的内容，我可以使用它.我只是对自己的脚本编写/理解能力不自信.

If there's a simple script I can copy and paste into my page that would convert --neutral into an rgb value and define that value as --neutral-rgb or something like that, I could use that. I'm just not confident in my script writing/understanding abilities.

或者，如果有话可以说:

Or, if there's a way to say:

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

或

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

那太好了...

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

P.S. Don't crucify me if this question has been answered before. I'm not exactly sure how to phrase it right. I've been teaching myself Sass in my spare time, so I'm just barely beginning to figure this stuff out.

非常感谢！

推荐答案

如果仅与背景有关，请在背景上使用额外的一层，以应用不透明度:

If it's only about background, use an extra layer for the background where you can apply opacity:

: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并能够根据需要更改初始颜色:

You can even apply filter and be able to change the initial coloration like you want:

: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将变量值转换为该颜色的较浅阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！