使用十六進制值在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> 

不過，目前尚不能在所有瀏覽器上都可以使用，因此只有在您知道所有用戶都擁有兼容瀏覽器的情況下，才可以使用。 您可能要暫時暫不發布此內容。

Answer 2

有兩種方法可以使用rgba或Direct opacityy設置不透明度

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