aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/-moz-image-region/index.html
blob: 143267cb88a5aa9f19d27705662e2ecd1676277f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
---
title: '-moz-image-region'
slug: Web/CSS/-moz-image-region
tags:
  - CSS
  - No estandar
  - Referencia
  - Referencia CSS
translation_of: Web/CSS/-moz-image-region
---
<div>{{Non-standard_header}}{{CSSRef}}</div>

<p><em>Para sistemas que funcionan con cualquier fondo ver {{ Cssxref("-moz-image-rect") }}.</em></p>

<h2 id="Resumen">Resumen</h2>

<p>Para cierto elementos y pseudo-elementos XUL que usan una imagen para la propiedad {{cssxref("list-style-image")}}, esta propiedad especifica la parte de una imagen que es usada en lugar en vez de la imagen completa. Esto permite a los elementos usar diferentes partes de la misma imagen para mejorar el rendimiento.</p>

<p>La síntaxis es similar a la síntaxis de la propiedad {{cssxref("clip")}}. Los 4 valors son relativos la esquina superior izquierda de la imagen.</p>

<p>{{cssinfo}}</p>

<h2 id="Síntaxis">Síntaxis</h2>

{{csssyntax}}

<h2 id="Ejemplos">Ejemplos</h2>

<pre class="brush:css">#example-button {
  /* muestra sólo el área 4x4 desde la esquina izquierda de esta imagen */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* muestra sólo el área 4x4 a la derecha del primero para cuando pongamos el ratón sobre el botón */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}</pre>