background-color

  • Raccourci de la révision : CSS/background-color
  • Titre de la révision : CSS : la propriété background-color
  • ID de la révision : 46965
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire 60 words added, 17 words removed

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété background-color définit la couleur d'arrière-plan d'un élément, soit avec une valeur de couleur, soit avec le mot clef transparent.

Syntaxe

background-color: couleur | transparent | inherit

Valeurs

couleur 
La couleur peut-être définie par une valeur hexadécimale, une valeur régulière RGB ou par des mots-clefs prédéfinis.
transparent 
La valeur par défaut de la propriété background-color. transparent signifie que l'élément n'a pas de couleur d'arrière-plan propre, mais qu'il a celle de l'élément situé en dessous de lui dans le contexte d'empilement.

Exemples

{{ CSSRefExampleLink("background-color") }}

/* Mots clefs */
.exampleone {
	background-color: teal;
	color: white;
}
/* Valeurs RGB régulières */
.exampletwo {
	background-color: rgb(153,102,153);
	color: rgb(255,255,204);
}
/* Valeurs hexadécimales */
.examplethree {
	background-color: #666699;
	color: #ffffff;
}

 

Notes

(Add links to good colour reference sites here.) Note a rédiger : Le choix des couleurs est fondamental pour un site Web, autant pour son esthétisme que pour sa lisibilité. * http://www.yoyodesign.org/outils/nco...ncolor.html.fr

Spécifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }} Bien que techniquement le mot-clé transparent a été retiré, cela ne change rien car il a été incorporé comme une {{ xref_csscolorvalue() }}
CSS 2.1 (traduction française) {{ Spec2('CSS2.1') }}  
CSS 1 (traduction française) {{ Spec2('CSS1') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Support de base {{ CompatGeckoDesktop("1.0") }} 1.0 4.0 3.5 1.0 (85)
Fonction Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support de base {{ CompatGeckoMobile("1.9.2") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

Voir également

{{ CSS_Reference:Background() }}

Interwiki Language Links

 

{{ languages( { "de": "de/CSS/background-color", "en": "en/CSS/background-color", "es": "es/CSS/background-color", "it": "it/CSS/background-color", "ja": "ja/CSS/background-color", "pl": "pl/CSS/background-color" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h3 name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>La propriété <code>background-color</code> définit la couleur d'arrière-plan d'un élément, soit avec une valeur de couleur, soit avec le mot clef <code>transparent</code>.</p>
<ul> <li><a href="/fr/CSS/Valeur_initiale" title="fr/CSS/Valeur_initiale">Valeur initiale</a> : transparent</li> <li>S'applique à : tous les éléments</li> <li><a href="/fr/CSS/Héritage" title="fr/CSS/Héritage">Héritée</a> : non</li> <li>Pourcentages : N/A</li> <li>Média : <a href="/fr/CSS/Média/Visuel" title="fr/CSS/Média/Visuel">visuel</a></li> <li><a href="/fr/CSS/Valeur_calculée" title="fr/CSS/Valeur_calculée">Valeur calculée</a> : comme spécifiée</li>
</ul>
<h3 name="Syntaxe">Syntaxe</h3>
<pre class="eval">background-color: <em>couleur</em> | transparent | inherit
</pre>
<h3 name="Valeurs">Valeurs</h3>
<dl> <dt>couleur </dt> <dd>La couleur peut-être définie par une valeur hexadécimale, une valeur régulière RGB ou par des mots-clefs prédéfinis.</dd> <dt>transparent </dt> <dd>La valeur par défaut de la propriété <code>background-color</code>. <code>transparent</code> signifie que l'élément n'a pas de couleur d'arrière-plan propre, mais qu'il a celle de l'élément situé en dessous de lui dans le <a href="/fr/Comprendre_le_z-index_en_CSS" title="fr/Comprendre_le_z-index_en_CSS">contexte d'empilement</a>.</dd>
</dl>
<h3 name="Exemples">Exemples</h3>
<p>{{ CSSRefExampleLink("background-color") }}</p>
<pre class="eval">/* Mots clefs */
.exampleone {
	background-color: teal;
	color: white;
}
</pre>
<pre class="eval">/* Valeurs RGB régulières */
.exampletwo {
	background-color: rgb(153,102,153);
	color: rgb(255,255,204);
}
</pre>
<pre class="eval">/* Valeurs hexadécimales */
.examplethree {
	background-color: #666699;
	color: #ffffff;
}
</pre>
<p> </p>
<h3 name="Notes">Notes</h3>
<p><span class="comment">(Add links to good colour reference sites here.)</span> <span class="comment">Note a rédiger : Le choix des couleurs est fondamental pour un site Web, autant pour son esthétisme que pour sa lisibilité. * <a class=" external" href="http://www.yoyodesign.org/outils/ncolor/ncolor.html.fr" rel="freelink">http://www.yoyodesign.org/outils/nco...ncolor.html.fr</a></span></p>
<h3 name="Sp.C3.A9cifications">Spécifications</h3>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-background/#background-color" title="http://www.w3.org/TR/css3-background/#background-color">CSS Backgrounds and Borders Module Level 3</a></td> <td>{{ Spec2('CSS3 Backgrounds') }}</td> <td>Bien que techniquement le mot-clé <code>transparent</code> a été retiré, cela ne change rien car il a été incorporé comme une {{ xref_csscolorvalue() }}</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color" title="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1</a> <a class=" external" href="http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background-color" title="http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background-color">(traduction française)</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td> </td> </tr> <tr> <td><a class=" external" href="http://www.w3.org/TR/CSS1/#background-color" title="http://www.w3.org/TR/CSS1/#background-color">CSS 1</a> <a class=" external" href="http://www.yoyodesign.org/doc/w3c/css1/#background-color" title="http://www.yoyodesign.org/doc/w3c/css1/#background-color">(traduction française)</a></td> <td>{{ Spec2('CSS1') }}</td> <td> </td> </tr> </tbody>
</table>
<h3 name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Support de base</td> <td>{{ CompatGeckoDesktop("1.0") }}</td> <td>1.0</td> <td>4.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Firefox Mobile (Gecko)</th> <th>Android</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Support de base</td> <td>{{ CompatGeckoMobile("1.9.2") }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3 name="Voir_.C3.A9galement">Voir également</h3>
<p>{{ CSS_Reference:Background() }}</p>
<p><span class="comment">Interwiki Language Links</span></p>
<p> </p> <p>{{ languages( { "de": "de/CSS/background-color", "en": "en/CSS/background-color", "es": "es/CSS/background-color", "it": "it/CSS/background-color", "ja": "ja/CSS/background-color", "pl": "pl/CSS/background-color" } ) }}</p>
Revenir à cette révision