clip

Artículo
10/11/2017

Establece la parte visible del objeto posicionado.

Sintaxis

{ clip: sClip }

Valores posibles

sClip

Cadena que especifica uno de los valores siguientes:

auto

Valor predeterminado. Recorta para exponer el objeto completo.

rect (top right bottom left)

Los valores top, right, bottom y left especifican valores de longitud, cualquiera de los cuales se puede reemplazar por auto , con lo que no se recorta dicho lado. El valor top especifica que se recorta todo lo que haya por encima de este valor en el eje Y (con 0 en la parte superior). El valor right especifica que se recorta todo lo que haya por encima de este valor en el eje X (con 0 a la izquierda). El valor bottom especifica que se recorta todo lo que haya por debajo de este valor en el eje Y (con 0 en la parte superior). El valor left especifica que se recorta todo lo que haya a la izquierda de este valor en el eje X (con 0 a la izquierda).

Esta propiedad tiene el valor predeterminado auto . No se hereda.

Observaciones

Esta propiedad define la forma y tamaño del objeto posicionado que está visible. position se debe establecer en absolute . Cualquier parte del objeto que esté fuera del área de recorte es transparente. Cualquier coordenada se puede reemplazar por el valor auto , que expone el lado respectivo (es decir, el lado no se recorta).

El orden de los valores de clip:rect (0 0 50 50) hace que el objeto sea invisible porque establece las posiciones superior y derecha de la región de recorte a 0. Para conseguir una ventanilla de 50 por 50, use clip:rect(0 50 50 0).

La propiedad clip está disponible en el sistema operativo Macintosh, a partir de Microsoft Internet Explorer 5.

Ejemplos

En el siguiente ejemplo se muestra cómo usar un estilo en línea para recortar la imagen:

<html>
<body>
  <div style="position: absolute; top: 0; left: 200; clip: rect(15px auto auto auto);">
    <img src="sphere.jpg"/>
  </div>
  <div style="position: absolute; top: 0; left: 300; clip: rect(auto 15px auto auto);">
    <img src="sphere.jpg"/>
  </div>
  <div style="position: absolute; top: 0; left: 400; clip: rect(auto auto 15px auto);">
    <img src="sphere.jpg"/>
  </div>
  <div style="position: absolute; top: 0; left: 500; clip: rect(auto auto auto 15px);">
    <img src="sphere.jpg"/>
  </div>
</body>
</html>

Información sobre estándares

Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 2 (CSS2) (Hojas de estilos en cascada (CSS), nivel 2 (CSS2)) Ee371188.xtlink_newWindow(es-es,Expression.40).png .

Aplicable a

a, address, applet, b, bdo, big, blockquote, button, center, cite, code, custom, dd, defaults, dfn, div, dl, dt, em, embed, fieldset, form, hn, hr, i, iframe, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, li, object, ol, p, ruby, s, select, span, sub, table, td, th, tr, tt, u, ul, var, xmp

Vea también

Conceptos

overflow

Compartir a través de