Característica background-origin en CSS

Característica background-origin en CSS

La propiedad background-originen CSS define el principio de la imagen de fondo especificada por la propiedad background-image.

Tenga en cuenta que la propiedad background-origin no tendrá ningún efecto cuando el valor de la propiedad se establezca background-attachment en fixed.

Tenga en cuenta que la propiedad abreviada background restablecerá el valor de esta propiedad a su valor inicial si no se establece allí.

Funciones background origin en css

Valor inicialpadding-box
Aplicado aTodos los artículos.
HeredableNo
MóvilNo
Valor calculadoComo se especificó.
/* palabras reservadas */ 
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* valores globales */ 
background-origin: inherit;
background-origin: initial;
background-origin: unset;

Ejemplos y aplicaciones

Ejemplo de uso del elemento <div> con imagen de fondo ( background-image) seleccionado duplicado una vez ( background-repeat) y color de fondo ( ) configurado en plata ( background-color) y color de texto ( color) en blanco. Tenga en cuenta que hemos agregado un marco grueso y una border anotación padding para marcar la diferencia entre el efecto de los valores visibles.

Código HTML:

< div  class = "border-box" >
  Contenido de texto número 1
</ div >

< div  class = "padding-box" >
  Contenido de texto número 2
</ div >

< div  class = "content-box" >
  Contenido de texto número 3
</ div >

Código CSS:

div {
  border: 10px double;
  padding: 10px;
  color: white;
  background-image: url(bg-image.png);
  background-color: lightgreen;
  background-repeat: no-repeat;
}
.border-box {
  background-origin: border-box;
}
.padding-box {
  background-origin: padding-box;
}
.content-box {
  background-origin: content-box;
}

Tenga en cuenta cómo podemos especificar varios valores de propiedad background-origin en la misma regla si tenemos más de una imagen de fondo:

div {
  background-image: url(image-1.png), url(image-2.png);
  background-origin: content-box, padding-box;
}

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico1.04.09.010,53,0

Estructura general

La propiedad puede utilizar background-origin una o más de las siguientes palabras reservadas

<box>

border-box

  • La posición del fondo será relativa al borde del mismo.

padding-box

  • La posición del fondo será relativa al borde de relleno.

content-box

  • La posición del fondo será relativa al cuadro de contenido.

Estructura formal

background-clip: <box>#;

El valor se puede repetir <box> más de una vez, separado por una coma, para identificar el principio de cada imagen de fondo.

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

Vea también

  • Propiedades de la página incautados por la propiedad de acceso directo background: la background-clipbackground-colorbackground-imagebackground-positionbackground-repeatbackground-sizebackground-attachment.
  • Página de propiedades color para establecer el color del elemento.
  • página de características box-sizing.
  • notas al pie padding.