Definición de .background-clip en CSS
.background-clip le permite controlar hasta qué punto una imagen o color de fondo se extiende más allá del relleno o contenido de un elemento.
Caso de empleo de background-clip
Si quieres utilizar esta propiedad de CSS en tu hoja de estilos, hazlo de la siguiente forma:
.frame {
background-clip: padding-box;
}Otro ejemplo más avanzado de .background-clip es el siguiente de CODEPEN:
Sintaxis de .background-clip en CSS
background-clip: border-box|padding-box|content-box|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| cuadro de borde | Valor por defecto. El fondo se extiende detrás del borde. | |
| caja de relleno | El fondo se extiende hasta el borde interior del borde. | |
| cuadro de contenido | El fondo se extiende hasta el borde del cuadro de contenido. | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .background-clip
Los números de la tabla detallan la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
