javascript - 使用十六进制值在 react 样式 backgroundColor 中添加不透明度？

Question

我想将 Javascript 中变量的值解析为 React style 属性。

但是，似乎只能使用 rgba 值添加不透明度？

假设我有:

const blueColor = "#2c8da9"

我现在想将其添加到 JSX 中的背景颜色属性，不透明度为 0.2。我可以用 rgba 做到这一点，但它看起来不太好:

backgroundColor: rgba(blueColor, 0.2)

有没有办法实现相同的效果，直接引用十六进制值而不是使用 rgba，将不透明度直接输入到 backgroundColor 属性中？

Answer 1

您可以使用新的 8 位十六进制颜色表示法，其中最后两位数字表示不透明度。

const blueColor = '#2c8da9';
const oBlueColor = blueColor+'33'; // 0.2 opacity added

document.getElementById('one').style.backgroundColor = blueColor;
document.getElementById('two').style.backgroundColor = oBlueColor;

<div id="one">one</div>
<div id="two">two</div>

虽然还不能在所有浏览器上运行，因此只有当您知道您的用户都拥有兼容的浏览器时才可以使用。您可能暂时不想在野外发布它。