
La propiedad background-origin
en 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 inicial | padding-box |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Móvil | No |
Valor calculado | Como 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ística | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 4.0 | 9.0 | 10,5 | 3,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
: labackground-clip
,background-color
,background-image
,background-position
,background-repeat
,background-size
ybackground-attachment
. - Página de propiedades
color
para establecer el color del elemento. - página de características
box-sizing
. - notas al pie
padding
.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS