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

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

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

说我有：

const blueColor = "#2c8da9"

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

backgroundColor: rgba(blueColor, 0.2)

是否可以通过直接引用十六进制值而不是使用rgba将不透明度直接输入到例如backgroundColor属性中来实现相同目的？

最佳答案

您可以使用新的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>

不过，目前尚不能在所有浏览器上都可以使用，因此只有在您知道所有用户都拥有兼容浏览器的情况下，才可以使用。您可能需要暂缓在野外发布此代码。

关于javascript - 使用十六进制值在react样式backgroundColor中添加不透明度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46796554/