Ajouter l'opacité dans le style de réaction backgroundColor en utilisant des valeurs hexadécimales?

Question

Je voudrais analyser une valeur d'une variable en Javascript à une propriété React style.

Cependant, il semble que l'on puisse seulement ajouter de l'opacité avec la valeur rgba?

Dire que j'ai:

const blueColor = "#2c8da9"

Je veux maintenant ajouter que dans une propriété de couleur d'arrière-plan JSX avec 0,2 opacité. Je peux le faire avec RGBA, mais il ne semble pas agréable:

backgroundColor: rgba(blueColor, 0.2)

Est-il possible d'obtenir le même, en faisant référence directement la valeur hexadécimale plutôt que d'utiliser rgba, à l'opacité d'entrée directement dans, par exemple , une propriété backgroundColor?

Answer 1

utres sont deux façons de définir l'opacité à l'aide rgba ou opacityy directe

x, .xy {opacité: 0,2;} etc

Answer 2

Vous pouvez utiliser la nouvelle notation de couleur hexadécimal à 8 chiffres, où le dernier deux chiffres signifient l'opacité.

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>

ne fonctionne pas sur tous les navigateurs encore, donc il est correct d'utiliser seulement si vous savez que vos utilisateurs ont tous les navigateurs conformes. Vous pourriez vouloir arrêter de relâcher ceci dans la nature pour l'instant.