image

  • Raccourci de la révision : CSS/image
  • Titre de la révision : image
  • ID de la révision : 448491
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Le type de donnée CSS <image> représente une image en 2D. Il existe deux d'image en CSS : les images plates statiques, souvent repérées par une URL, et les images générées dynamiquement comme les dégradés ou les représentations de parties de l'arborescence.

Le CSS permet de manipuler différentes sortes d'images :

  • les images avec des dimensions intrinsèques, qui ont une taille propre, comme une image au format jpeg qui a des dimensions fixes.
  • les images avec plusieurs dimensions intrinsèques, qui existent sous différentes dimensions dans un même fichier, comme certains formats .ico. Dans ce cas, les dimensions intrinsèques seront celles de la plus grande image en surface, et ayant le ratio le plus proche de la boîte contenante.
  • les images sans dimensions intrinsèques avec un ratio intrinsèque, entre la largeur et sa hauteur, comme certaines images vectorielles, au format SVG par exemple.
  • les images n'ayant ni dimensions intrinsèques, ni ratio intrisèque, comme un dégradé CSS par exemple.

Le CSS la taille concrète de l'objet en utilisant ces dimensions intrinsèques, la taille spécifiée définie par les propriétés CSS comme {{ cssxref("width") }}, {{ cssxref("height") }} ou {{ cssxref("background-size") }}, et la taille par défaut de l'objet définie en fonction de la propriété utilisée :

Type d'objet Taille par défaut de l'objet
{{ cssxref("background-image") }} La taille de la zone de positionnement de l'arrière-plan
{{ cssxref("list-style-image") }} La taille d'un caractère de 1em
{{ cssxref("border-image") }} La taille de la zone de bordure de l'élément
{{ cssxref("cursor") }} La dimension correspondant à la taille d'un curseur sur le système utilisé
Contenu remplacé comme avec la combinaison de la propriété CSS {{ cssxref("content") }} avec les pseudo-éléments {{ cssxref("::after") }} et {{ cssxref("::before") }} Un rectangle de 300px × 150px

La taille concrète de l'objet est calculée selon l'algorithme suivant :

  • si la taille spécifié définie à la fois la largeur et la hauteur, ces valeurs sont utilisées comme la taille concrète de l'élément.
  • si la taille spécifiée définie soit la hauteur ou la largeur, la valeur manquante est déterminée grâce au ratio intrinsèque s'il existe ou les dimensions intrisèques si la valeur spécifiée y correspond ou la taille par défaut de l'objet pour la dimension manquante.
  • si la taille spécifiée ne définie ni hauteur ni largeur, la taille concrète de l'objet est calculée de manière à ce que le ratio intrinsèque soit conservé et que la taille par défaut de l'objet ne soit pas dépassée. Si l'image n'a pas de ratio intrinsèque, le ratio intrinsèque de l'objet auquel il s'applique est utilisé ; si l'objet n'en possède pas, la hauteur ou la largeur manquante est prise depuis la taille par défaut de l'objet.

Les images peuvent être utilisée pour de nombreuses propriétés CSS comme {{ cssxref("background-image") }}, {{ cssxref("border-image") }}, {{ cssxref("content") }}, {{ cssxref("list-style-image") }} ou {{ cssxref("cursor") }}.

Note : tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section compatibilité des navigateurs pour une liste explicative.

Syntaxe

Un type de donnée CSS <image> peut représenter un type parmi les suivants :

  • une image dénotée par le type de donnée CSS {{ xref_cssuri() }} et la fonction url( ;
  • un {{ xref_cssgradient() }} CSS ;
  • une partie de la page, définie par la fonction {{ cssxref("element", "element()") }}.

Exemples

Ceci sont des valeurs d'images valides :

url(test.jpg)                          La fonction url(), tant que test.jpg est une image
linear-gradient(to bottom, blue, red)  Un <dégradé>
element(colonne3)                      Une partie de la page, en utilisant la fonction element(),
                                       si colonne3 est un id CSS existant sur la page.

Ceci sont des valeurs d'images non valides :

cervin.jpg                             Un fichier image doit être définie à l'aide de la fonction url().
url(report.pdf)                        Le fichier pointé par la fonction url() doit être une image.
element(fauxid)                        Si fauxid n'est pas un id CSS existant sur la page.

Spécifications

Spécification État Commentaire
CSS Image Value and Replaced Content Module Level 3 {{ Spec2('CSS3 Images') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
<uri> {{ compatVersionUnknown() }} {{ compatVersionUnknown() }} {{ compatVersionUnknown() }} {{ compatVersionUnknown() }} {{ compatVersionUnknown() }}
<dégradé> {{ compatVersionUnknown() }}
limité à {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}
{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }} IE 10{{ property_prefix("-ms") }} {{ compatVersionUnknown() }}{{ property_prefix("-o") }} {{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}
element() 4.0 (2.0) limité à {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }} {{ compatUnknown() }} {{ compatUnknown() }} {{ compatUnknown() }} {{ compatUnknown() }}
Fonction Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
<uri> {{ compatVersionUnknown() }} {{ compatVersionUnknown() }} {{ compatVersionUnknown() }} {{ compatVersionUnknown() }} {{ compatVersionUnknown() }}
<dégradé> {{ compatVersionUnknown() }}
limité à {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}
{{ compatUnknown() }} {{ compatUnknown() }} {{ compatUnknown() }} {{ compatUnknown() }}
element() 4.0 (2.0) limité à {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }} {{ compatUnknown() }} {{ compatUnknown() }} {{ compatUnknown() }} {{ compatUnknown() }}

Voir également

Source de la révision

<p>Le type de donnée CSS <code>&lt;image&gt;</code> représente une image en 2D. Il existe deux d'image en CSS : les images plates statiques, souvent repérées par une URL, et les images générées dynamiquement comme les dégradés ou les représentations de parties de l'arborescence.</p>
<p>Le CSS permet de manipuler différentes sortes d'images :</p>
<ul>
  <li>les images avec des <span id="cke_bm_72S" style="display: none;">&nbsp;</span><em>dimensions <span id="cke_bm_72E" style="display: none;">&nbsp;</span>intrinsèques</em>, qui ont une taille propre, co<span id="cke_bm_73E" style="display: none;">&nbsp;</span>mme une image au format jpeg qui a des dimensions fixes.</li>
  <li>les images avec <em>plusieurs dimensions intrinsèques</em>, qui existent sous différentes dimensions dans un même fichier, comme certains formats .ico. Dans ce cas, les dimensions intrinsèques seront celles de la plus grande image en surface, et ayant le ratio le plus proche de la boîte contenante.</li>
  <li>les images sans dimensions intrinsèques avec un <em>ratio intrinsèque</em>, entre la largeur et sa hauteur, comme certaines images vectorielles, au format SVG par exemple.</li>
  <li>les images n'ayant <em><a name="no_intrinsic">ni dimensions intrinsèques</a>, ni ratio intrisèque</em>, comme un dégradé CSS par exemple.</li>
</ul>
<p>Le CSS la <em>taille concrète de l'objet</em> en utilisant ces <em>dimensions intrinsèques</em>, la <em>taille spécifiée</em> définie par les propriétés CSS comme {{ cssxref("width") }}, {{ cssxref("height") }} ou {{ cssxref("background-size") }}, et la <em>taille par défaut de l'objet</em> définie en fonction de la propriété utilisée :</p>
<table class="standard-table">
  <thead>
    <tr>
      <th>Type d'objet</th>
      <th>Taille par défaut de l'objet</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ cssxref("background-image") }}</td>
      <td>La taille de la zone de positionnement de l'arrière-plan</td>
    </tr>
    <tr>
      <td>{{ cssxref("list-style-image") }}</td>
      <td>La taille d'un caractère de <code>1em</code></td>
    </tr>
    <tr>
      <td>{{ cssxref("border-image") }}</td>
      <td>La taille de la zone de bordure de l'élément</td>
    </tr>
    <tr>
      <td>{{ cssxref("cursor") }}</td>
      <td>La dimension correspondant à la taille d'un curseur sur le système utilisé</td>
    </tr>
    <tr>
      <td>Contenu remplacé comme avec la combinaison de la propriété CSS {{ cssxref("content") }} avec les pseudo-éléments {{ cssxref("::after") }} et {{ cssxref("::before") }}</td>
      <td>Un rectangle de <code>300px</code><code> × 150px</code></td>
    </tr>
  </tbody>
</table>
<p>La taille concrète de l'objet est calculée selon l'algorithme suivant :</p>
<ul>
  <li>si la taille spécifié définie à la fois la largeur et la hauteur, ces valeurs sont utilisées comme la taille concrète de l'élément.</li>
  <li>si la taille spécifiée définie soit la hauteur ou la largeur, la valeur manquante est déterminée grâce au ratio intrinsèque s'il existe ou les dimensions intrisèques si la valeur spécifiée y correspond ou la taille par défaut de l'objet pour la dimension manquante.</li>
  <li>si la taille spécifiée ne définie ni hauteur ni largeur, la taille concrète de l'objet est calculée de manière à ce que le ratio intrinsèque soit conservé et que la taille par défaut de l'objet ne soit pas dépassée. Si l'image n'a pas de ratio intrinsèque, le ratio intrinsèque de l'objet auquel il s'applique est utilisé ; si l'objet n'en possède pas, la hauteur ou la largeur manquante est prise depuis la taille par défaut de l'objet.</li>
</ul>
<p>Les images peuvent être utilisée pour de nombreuses propriétés CSS comme {{ cssxref("background-image") }}, {{ cssxref("border-image") }}, {{ cssxref("content") }}, {{ cssxref("list-style-image") }} ou {{ cssxref("cursor") }}.</p>
<div class="note">
  <strong>Note :</strong> tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section <a href="/fr/CSS/image#Compatibilit.C3.A9_des_navigateurs" title="fr/CSS/image#Compatibilit.C3.A9_des_navigateurs">compatibilité des navigateurs</a> pour une liste explicative.</div>
<h2 class="note" id="Syntaxe">Syntaxe</h2>
<p>Un type de donnée CSS <code>&lt;image&gt;</code> peut représenter un type parmi les suivants :</p>
<ul>
  <li>une image dénotée par le type de donnée CSS {{ xref_cssuri() }} et la fonction <code>url(</code> ;</li>
  <li>un {{ xref_cssgradient() }} CSS ;</li>
  <li>une partie de la page, définie par la fonction {{ cssxref("element", "element()") }}.</li>
</ul>
<h2 id="Exemples">Exemples</h2>
<p>Ceci sont des valeurs d'images valides :</p>
<pre>
url(test.jpg)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; La fonction url(), tant que test.jpg est une image
linear-gradient(to bottom, blue, red)&nbsp; Un &lt;dégradé&gt;
element(colonne3)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Une partie de la page, en utilisant la fonction element(),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; si colonne3 est un id CSS existant sur la page.
</pre>
<p>Ceci sont des valeurs d'images non valides :</p>
<pre>
cervin.jpg&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Un fichier image doit être définie à l'aide de la fonction url().
url(report.pdf)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Le fichier pointé par la fonction url() doit être une image.
element(fauxid)                        Si fauxid n'est pas un id CSS existant sur la page.
</pre>
<h2 id="Specifications" name="Specifications">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">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://dev.w3.org/csswg/css3-images/#image" title="http://dev.w3.org/csswg/css3-images/#image">CSS Image Value and Replaced Content Module Level 3</a></td>
      <td>{{ Spec2('CSS3 Images') }}</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>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td><code>&lt;uri&gt;</code></td>
        <td>{{ compatVersionUnknown() }}</td>
        <td>{{ compatVersionUnknown() }}</td>
        <td>{{ compatVersionUnknown() }}</td>
        <td>{{ compatVersionUnknown() }}</td>
        <td>{{ compatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>&lt;dégradé&gt;</code></td>
        <td>{{ compatVersionUnknown() }}<br />
          limité à {{ cssxref("background-image") }} &amp; {{ cssxref("background") }}{{ property_prefix("-moz") }}</td>
        <td>{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
        <td>IE 10{{ property_prefix("-ms") }}</td>
        <td>{{ compatVersionUnknown() }}{{ property_prefix("-o") }}</td>
        <td>{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td><code>element()</code></td>
        <td>4.0 (2.0) limité à {{ cssxref("background-image") }} &amp; {{ cssxref("background") }}{{ property_prefix("-moz") }}</td>
        <td>{{ compatUnknown() }}</td>
        <td>{{ compatUnknown() }}</td>
        <td>{{ compatUnknown() }}</td>
        <td>{{ compatUnknown() }}</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 Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td><code>&lt;uri&gt;</code></td>
        <td>{{ compatVersionUnknown() }}</td>
        <td>{{ compatVersionUnknown() }}</td>
        <td>{{ compatVersionUnknown() }}</td>
        <td>{{ compatVersionUnknown() }}</td>
        <td>{{ compatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>&lt;dégradé&gt;</code></td>
        <td>{{ compatVersionUnknown() }}<br />
          limité à {{ cssxref("background-image") }} &amp; {{ cssxref("background") }}{{ property_prefix("-moz") }}</td>
        <td>{{ compatUnknown() }}</td>
        <td>{{ compatUnknown() }}</td>
        <td>{{ compatUnknown() }}</td>
        <td>{{ compatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>element()</code></td>
        <td>4.0 (2.0) limité à {{ cssxref("background-image") }} &amp; {{ cssxref("background") }}{{ property_prefix("-moz") }}</td>
        <td>{{ compatUnknown() }}</td>
        <td>{{ compatUnknown() }}</td>
        <td>{{ compatUnknown() }}</td>
        <td>{{ compatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li><a href="/fr/Utilisation_de_dégradés" title="fr/Utilisation_de_dégradés">Utiliser les dégradés CSS</a>, {{ xref_cssgradient() }}, <a href="/en/CSS/linear-gradient" title="linear-gradient"><code>linear-gradient()</code></a>, <a href="/en/CSS/radial-gradient" title="radial-gradient"><code>radial-gradient()</code></a>, <a href="/en/CSS/repeating-linear-gradient" title="repeating-linear-gradient"><code>repeating-linear-gradient()</code></a>, <a href="/en/CSS/repeating-radial-gradient" title="repeating-radial-gradient"><code>repeating-radial-gradient()</code></a>;</li>
  <li><a href="/en/CSS/element" title="en/CSS/element"><code>element()</code></a>;</li>
  <li>Types de données CSS : {{ CSSDataTypes() }}.</li>
</ul>
Revenir à cette révision