Objet regexp javascript : Les expressions régulières sont des modèles utilisés pour vérifier des combinaisons de caractère dans les chaînes de caractères.
La propriété CSS opacity : définition et utilisation
La propriété CSS opacity permet de définir la transparence d'un élément HTML.
Syntaxe générale
La syntaxe générale de la propriété opacity est la suivante :
opacity: valeur;
Valeurs possibles
La valeur de la propriété opacity est un nombre compris entre 0 et 1, où :
- 0 signifie une opacité totale (élément totalement transparent)
- 1 signifie une opacité normale (élément totalement opaque)
- Les valeurs entre 0 et 1 permettent de définir une opacité partielle (élément semi-transparent)
Exemples
Voici quelques exemples d'utilisation de la propriété opacity :
- opacity: 0.5; : rend l'élément semi-transparent
- opacity: 0; : rend l'élément totalement transparent (invisible)
- opacity: 1; : rend l'élément totalement opaque (non-transparent)
Conseils et astuces d'utilisation
- La propriété opacity affecte la transparence de l'élément ainsi que de ses descendants.
- La propriété opacity peut également être utilisée en conjonction avec les propriétés CSS rgba() et hsla() pour définir une couleur semi-transparente.
- Il est important de noter que la propriété opacity affecte également la visibilité des contenus enfant de l'élément. Si vous voulez que l'élément parent soit transparent mais que les contenus restent visibles, vous pouvez utiliser la propriété CSS background-color: rgba().
| Valeurs par défaut | 1 |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.opacity="0.5" |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 4 | 9 | 2 | 3.1 | 9 |
plus d'exemples pour l'utilisation de la propriété CSS opacity
La propriété opacité ajoute de la transparence à l'arrière-plan d'un élément, ainsi qu'à tous ses éléments enfants. Cela peut rendre le texte à l'intérieur d'un élément transparent difficile à lire :
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété css opacity </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
background-color: #4CAF50;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>La propriété css opacity</h1>
<p>La propriété opacité donne de la transparence à l'arrière-plan d'un élément, mais aussi à tous ses éléments enfants. Ainsi, le texte contenu dans un élément transparent deviendra difficile à lire :</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (par défaut)</p></div>
</body>
</html>
Pour ne pas appliquer l'opacité aux éléments enfants (comme dans l'exemple ci-dessus), utilisez plutôt des valeurs de couleur RGBA. L'exemple suivant définit l'opacité pour la couleur d'arrière-plan, mais pas pour le texte :
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété css opacity </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
background: rgb(76, 175, 80);
padding: 10px;
}
div.first {
background: rgba(76, 175, 80, 0.1);
}
div.second {
background: rgba(76, 175, 80, 0.3);
}
div.third {
background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>
<h1>Boîtes transparentes </h1>
<h2>En utilisant la propriété d'opacité "opacity":</h2>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<h2>En utilisant les valeurs de couleur RGBA :</h2>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
</body>
</html>
En savoir plus sur la fonction rgba() ici
Comment utiliser JavaScript pour modifier l'opacité d'un élément :
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété css opacity </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#p1 {
background-color: yellow;
}
</style>
</head>
<body>
<h1>La propriété css opacity</h1>
<p id="p1">Sélectionnez une valeur dans la liste ci-dessous, pour modifier l'opacité de cet élément !</p>
<select onchange="myFunction(this);" size="5">
<option>0
<option>0.2
<option>0.5
<option>0.8
<option selected="selected">1
</select>
<script>
function myFunction(x) {
// Renvoie la valeur de l'option sélectionnée
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Votre navigateur ne supporte pas cette propriété !");
}
}
</script>
</body>
</html>