我不知道如何使用自定义css变量与聚合物.目前我正在用“铁覆盖行为”进行叠加.
这包括定义了各种css变量的“铁覆盖背景”元素.我主要感兴趣的是–iron-overlay-背景不透明度.
<style is="custom-style">
:root {
--iron-overlay-backdrop-opacity: 0.4;
}
</style>
但我不想在那里定义样式！我想在自定义叠加元素中定义它们.
我试过这样使用它们
<dom-module id="faq-overlay">
<style>
:host {
--iron-overlay-backdrop-opacity: 0.3;
--iron-overlay-backdrop-background-color: red;
}
...
但这不行.有没有办法做到这一点？
解决方法
我相信你正在寻找的是：(在你的主题文件中)
<style is="custom-style">
:root {
--iron-overlay-backdrop-opacity: 0.7;
--background-r: 0;
--background-g: 0;
--background-b: 255;
--background-color: blue;
--iron-overlay-backdrop-background-color: rgba(var(--background-r),var(--background-g),var(--background-b),var(--iron-overlay-backdrop-opacity));
}
</style>
并在您的自定义元素
<style is="custom-style">
:host paper-material.custom {
background-color: var(--iron-overlay-backdrop-background-color);
}
</style>
