« Le langage CSS/Fonds, bordures, marges et espacements » : différence entre les versions
Contenu supprimé Contenu ajouté
m <source> -> <syntaxhighlight> (phab:T237267) |
|||
Ligne 44 :
=== Image du fond ===
La propriété <code>background-image</code> définit une image de remplissage du fond d'une boîte CSS.
Elle accepte comme valeur l'URL de l'image et En effet, la couleur de fond est peinte ''sous'' l'image. Ainsi, la couleur peut apparaître dans une image comportant des zones transparentes, et cette couleur remplira le reste de la surface de la boîte si l'image n'a pas des dimensions suffisantes. L'URL doit être spécifié comme une chaîne de caractère à la fonction <code>url()</code> :
<syntaxhighlight lang="css">
background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a6/VST_image_of_the_Hercules_galaxy_cluster.jpg");
</syntaxhighlight>
On peut définir :
Ligne 50 ⟶ 58 :
* la répétition de l'image, avec <code>background-repeat</code> ;
* le défilement de l'image, avec <code>background-attachment</code>.
=== Fond en dégradé de couleur ===
La même propriété <code>background-image</code> permet d'afficher un dégradé de couleur, en utilisant une fonction de dégradé au lieu de la fonction <code>url()</code>.
Exemple :
<syntaxhighlight lang="css">
background-image: linear-gradient(rgb(100,100,160),rgb(100,160,160));
</syntaxhighlight>
<div style="text-align:center; padding: 3em 0; background-image: linear-gradient(rgb(100,100,160),rgb(100,160,160));">
Le fond en dégradé.
</div>
=== Le raccourci <code>background</code> ===
Ligne 61 ⟶ 83 :
Exemple d'un test d'opacité / transparence à 50 % :
<syntaxhighlight lang="html">
<div style="background-color: yellow; width: 100%; padding: 5px;">
<div style="background-color: lightblue; opacity: 0.5; position:50px;">Bleu sur jaune.</div>
| |||