Propiedad de clip CSS
Ejemplo
Recortar una imagen:
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Definición y uso
¿Qué sucede si una imagen es más grande que el elemento que la contiene?
La clip
propiedad le permite especificar un rectángulo para recortar un elemento absolutamente posicionado. El rectángulo se especifica como cuatro coordenadas, todas desde la esquina superior izquierda del elemento que se va a recortar.
Nota: la clip
propiedad no funciona si "overflow:visible".
Nota: La clip
propiedad está obsoleta y será reemplazada por la propiedad en el futuro.
clip-path
Valor por defecto: | auto |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | CSS2 |
Sintaxis de JavaScript: | objeto .style.clip="rect(0px,50px,50px,0px)" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
Sintaxis CSS
clip: auto|shape|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
auto | No clipping will be applied. This is default | |
shape | Clips an element. The only valid value is: rect (top, right, bottom, left) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial CSS: Posicionamiento CSS
Referencia HTML DOM: propiedad de clip