使用十六进制值在反应样式背景色中添加不透明度？

Question

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

但是，似乎只能通过该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>

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