Característica background-clip en CSS

La propiedad background-clip CSS especifica cómo el fondo del elemento descansará sobre los bordes del elemento, ya sea que el fondo sea un color <color> o una imagen <image>.

Si un elemento no tiene el atributo background-image o background-color, el marco del elemento cubrirá la diferencia entre los valores de este atributo sólo en raras ocasiones (como resultado del efecto del atributo border-style o border-image).

Funciones background clip en css

Valor inicial	`border-box`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

/*-------- palabras reservadas ---------*/ 
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
/* -------- valores globales --------*/ 
background-clip: inherit;
background-clip: initial;
background-clip: unset;

Ejemplos y aplicaciones

En este ejemplo, cada elemento tendrá un valor diferente para background-clip.

Código HTML:

< p  class = "border-box" > El fondo se extenderá más allá del marco. </ p > 
< p  class = "padding-box" > El fondo se extenderá hasta el borde interior del marco. </ p > 
< p  class = "content-box" > El fondo se extenderá solo hasta los límites del content-box. </ p > 
< p  class = "text" > El fondo solo será visible en el texto. </ p >

Código CSS:

p {
  background: #28832c;
  border: 4px dashed black;
  padding: 2em;
}
.border-box  { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text {
  background-clip: text;
  color: rgba(0, 0, 0, .2);
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4.0	3,5	1.0
Valor del texto	usando el anterior `-webkit-`	49,0	No soportado	usando el anterior `-webkit-`	usando el anterior `-webkit-`

Estructura general

border-box

El fondo se extenderá hasta el borde exterior del borde, pero caerá por debajo.

padding-box

El fondo se extenderá hasta el borde exterior del área de relleno y el fondo no se dibujará debajo del marco.

content-box

El borde de fondo será el cuadro de contenido.

text

El fondo se dibujará dentro del texto contenido en el elemento. Consulte la sección Compatibilidad con navegadores para obtener información sobre qué navegadores admiten este valor.

Estructura formal

background-clip: <box>#;

El valor se puede repetir <box> más de una vez (separado por una coma) para definir los límites de cada imagen de fondo.

<box> = border-box | padding-box | content-box

Ver también

Propiedades de la página incautados por la propiedad de acceso directo background: la background-color, background-image, background-origin, background-position, background-repeat, background-size, y background-attachment.
Página de propiedades border para establecer el marco del elemento.
Página de propiedades color para establecer el color del elemento.
página de características box-sizing.