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

Question

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

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

说我有：

const blueColor = "#2c8da9"

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

backgroundColor: rgba(blueColor, 0.2)

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

Answer 1

thers是使用rgba或直接不透明度

设置不透明度的两种方法

的x，某个.XY {不透明度：0.2;}等

Answer 2

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

虽然不适用于所有浏览器，但只有当您知道您的用户都具有兼容的浏览器时才可以使用。你可能想暂时不要在野外释放它。