Atributo clip de CSS

Definición y uso

propiedad clip recorta elementos de alineación absoluta.

¿Qué sucede cuando el tamaño de una imagen es mayor que el elemento que la contiene? La propiedad "clip" le permite especificar el tamaño visible de un elemento, de modo que este elemento se recortará y se mostrará en esta forma.

explicación

Esta propiedad se utiliza para definir un rectángulo de recorte. Para un elemento definido de manera absoluta, el contenido dentro de este rectángulo es visible. El contenido fuera de este área de recorte se manejará según el valor de overflow. El área de recorte puede ser mayor o menor que el área de contenido del elemento.

Véase también:

Tutoriales CSS:Alineación CSS

Manual de referencia de HTML DOM:propiedad clip

ejemplo

Recortar imagen:

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

Prueba tu mismo

Sintaxis de CSS

clip: auto|forma|initial|inherit;

valor de propiedad

valor descripción
forma Configurar la forma del elemento. El único valor de forma válido es: rect (arriba, derecha, abajo, izquierda)
auto Valor predeterminado. No se aplica ningún recorte.
inherit Se especifica que el valor de la propiedad clip debe ser heredado del elemento padre.

Detalles técnicos

Valor predeterminado: auto
Herencia: no
Versión: CSS2
Sintaxis de JavaScript: object.style.clip="rect(0px,50px,50px,0px)"

Más ejemplos

Configurar la forma del elemento
Este ejemplo muestra cómo configurar la forma de un elemento. Este elemento se corta en la forma y luego se muestra.

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 7.0