background-clip

  • Raccourci de la révision : CSS/background-clip
  • Titre de la révision : background-clip
  • ID de la révision : 462439
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Oui
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS background-clip spécifie si la couleur ou l'image d'arrière-plan d'un élément doit s'étendre sous sa bordure.

S'il n'y a pas d'image d'arrière-plan, la propriété n'a d'effet que si la bordure a des zones transparentes (à cause de {{ Cssxref("border-style") }}) ou est partiellement opaque. Sinon, la bordure cache la surface en-dessous.

  • {{ Xref_cssinitial() }} : border-box
  • S'applique à : tous les éléments
  • {{ Xref_cssinherited() }} : non
  • Média : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} : comme spécifiée

Syntaxe

background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*

Valeurs

border-box
L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (mais reste en-dessous de la bordure sur l'axe z).
padding-box
L'arrière-plan n'est pas dessiné sous la bordure (l'arrière-plan s'étend jusqu'au bord extérieur du padding).
content-box
L'arrière-plan est dessiné dans (contenu dans) la boîte de contenu.

Exemples

 pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* L'arrière-plan jaune n'ira pas dessous la bordure */
   background-clip: padding-box;
 }

Spécifications

Spécification Statut Commentaire
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 [3] {{ CompatGeckoDesktop("2.0") }} [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] {{ CompatGeckoDesktop("2.0") }} [1] 9.0 [2] {{ CompatNo() }} 3.0 (522) [3]
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
content-box {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[1] Gecko supporte, depuis la version 1.1 jusqu'à la version 1.9.2, ce qui correspond de Firefox 1.0 à 3.6 inclus, la syntaxe préfixée : -moz-background-clip: padding | border.

[2] Internet Explorer 7, mais pas les autres version de Internet Explorer, se comporte comme background-clip:padding si overflow: hidden | auto | scroll.

[3] Webkit supporte aussi une version préfixée de cette propriété, et dans ce cas, en supplément des autres mots-clés, les synonymes suivants : padding, border, et content.

[4] Konqueror 3.5.4 supporte -khtml-background-clip.

Voir également

  • {{ CSS_Reference:Background() }}
  • {{ cssxref("clip") }}

{{ languages( { "de": "de/CSS/background-clip", "ja": "ja/CSS/background-clip", "pl": "pl/CSS/-moz-background-clip", "en": "en/CSS/background-clip"} ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>background-clip</code> spécifie si la couleur ou l'image d'arrière-plan d'un élément doit s'étendre sous sa bordure.</p>
<p>S'il n'y a pas d'image d'arrière-plan, la propriété n'a d'effet que si la bordure a des zones transparentes (à cause de {{ Cssxref("border-style") }}) ou est partiellement opaque. Sinon, la bordure cache la surface en-dessous.</p>
<ul class="cssprop">
  <li>{{ Xref_cssinitial() }} :<code> border-box</code></li>
  <li>S'applique à : tous les éléments</li>
  <li>{{ Xref_cssinherited() }} : non</li>
  <li>Média : {{ Xref_cssvisual() }}</li>
  <li>{{ Xref_csscomputed() }} : comme spécifiée</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    border-box</dt>
  <dd>
    L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (mais reste en-dessous de la bordure sur l'axe z).</dd>
  <dt>
    padding-box</dt>
  <dd>
    L'arrière-plan n'est pas dessiné sous la bordure (l'arrière-plan s'étend jusqu'au bord extérieur du <code>padding</code>).</dd>
  <dt>
    content-box</dt>
  <dd>
    L'arrière-plan est dessiné dans (contenu dans) la boîte de contenu.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre style="overflow:visible; border:5px navy; border-style:dotted double; background: #F8D575; -moz-background-clip:padding; -webkit-background-clip:padding; background-clip:padding-box;">
 pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* L'arrière-plan jaune n'ira pas dessous la bordure */
&nbsp;  background-clip: padding-box;
&nbsp;}
</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-clip" title="http://dev.w3.org/csswg/css3-background/#the-background-clip">CSS Backgrounds and Borders Module Level 3</a></td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>1.0 [3]</td>
        <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
        <td>9.0 [2]</td>
        <td>10.5</td>
        <td>3.0 (522) [3]</td>
      </tr>
      <tr>
        <td><code>content-box</code></td>
        <td>1.0 [3]</td>
        <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
        <td>9.0 [2]</td>
        <td>{{ CompatNo() }}</td>
        <td>3.0 (522) [3]</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>content-box</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] Gecko supporte, depuis la version 1.1 jusqu'à la version 1.9.2, ce qui correspond de Firefox 1.0 à 3.6 inclus, la syntaxe préfixée : <code>-moz-background-clip: padding | border</code>.</p>
<p>[2] Internet Explorer 7, mais pas les autres version de Internet Explorer, se comporte comme<code> background-clip:padding </code>si<code> overflow: hidden | auto | scroll</code>.</p>
<p>[3] Webkit supporte aussi une version préfixée de cette propriété, et dans ce cas, en supplément des autres mots-clés, les synonymes suivants : <code>padding</code>, <code>border</code>, et <code>content</code>.</p>
<p>[4] Konqueror 3.5.4 supporte<code> -khtml-background-clip</code>.</p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>{{ CSS_Reference:Background() }}</li>
  <li>{{ cssxref("clip") }}</li>
</ul>
<p>{{ languages( { "de": "de/CSS/background-clip", "ja": "ja/CSS/background-clip", "pl": "pl/CSS/-moz-background-clip", "en": "en/CSS/background-clip"} ) }}</p>
Revenir à cette révision