我正在设计电子应用程序,因此可以访问CSS变量。我在中定义了一个颜色变量vars.css:
vars.css
:root { --color: #f0f0f0; }
我想在中使用此颜色main.css,但应用了一些不透明度:
main.css
#element { background: (somehow use var(--color) at some opacity); }
我将如何去做呢?我没有使用任何预处理器,只有CSS。我希望使用全CSS的答案,但是我会接受JavaScript / jQuery。
我无法使用,opacity因为我使用的背景图片应该不透明。
opacity
您不能采用现有的颜色值并对其应用Alpha通道。也就是说,您不能使用现有的十六进制值(例如)#f0f0f0,给它一个alpha分量,并将结果值与另一个属性一起使用。
#f0f0f0
但是,自定义属性允许您将十六进制值转换为RGB三元组以与一起使用rgba(),将该值存储在自定义属性(包括逗号!)中,使用将该值替换var()为rgba()具有所需alpha值的函数,然后它将正常工作:
rgba()
var()
: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>
这似乎太好了,难以置信。1它是如何工作的?
奇妙之处在于一个事实,即自定义属性的值替换 为是 更换时var()在属性值中的引用, 之前 计算该属性的值。这意味着,只要自定义属性而言,价值--color在你的例子是不是在所有的颜色值 ,直到 一个var(--color)表达式出现的地方,需要一个颜色值(也只有在这种情况下)。根据css-variables规范的第2.1节:
--color
var(--color)
自定义属性的允许语法极为宽松。生产匹配一个或多个令牌的任何序列,只要该序列不包含,,不匹配的<)-token>,<]- token>或<}-token>,或顶级令牌或令牌,其值为“!”。
例如,以下是有效的自定义属性:
--foo: if(x > 5) this.width = 10;
尽管此值显然不能用作变量,但在任何常规属性中均无效,但JavaScript可能会读取并对其起作用。
和第3节:
如果一个属性包含一个或多个var()函数,并且这些函数在语法上有效,则必须假定整个属性的语法在解析时都是有效的。仅在替换var()函数之后,才在计算值时对语法进行检查。
这意味着240, 240, 240您 在 计算声明 之前 ,上面看到的值将直接替换为rgba()函数。所以这: __
240, 240, 240
#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值。
1 是的,如果您正在不支持自定义属性的浏览器中运行代码段。