
Tabla de contenidos
- Funciones y aplicaciones del background
- Ejemplos del uso de background
- Soporte del background por los navegadores
- Funcionamiento general de background
El elemento background
tenemos acceso directo a las propiedades en CSS que nos permite modificar las opciones de formato que están agrupadas en una. En esto también se incluyen el color o la imagen, el principio, tamaño, método de repetición y otras características.
Propiedad se puede utilizar background
para ajustar y asignar valores de las funciones o características de las siguientes propiedades: background-clip
, background-color
, background-image
, background-origin
, background-position
, background-repeat
, background-size
y background-attachment
.
Funciones y aplicaciones del background
Valor por defecto | Los valores de los atributos se establecerán en sus valores iniciales: background-image = none background-position = 0% 0% background-size = auto auto background-repeat = repeat background-origin = padding-box background-clip = border-box background-attachment = scroll background-color = transparent |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Animable | sí |
/* <color de fondo> */ background : green; /* <bg-image> <repeat-style> */ background : url ("image_fondo.png") repeat-y; /* <cuadro> <color de fondo> */ background : border-box yellow; /* una imagen centrada y redimensionada */ background : no-repeat center/60 % url ("image_fondo.png");
La propiedad abreviada background
establecerá los valores que se le asignan y restablecerá por defecto los atributos para los que no hemos establecido o asignado un valor en su valor inicial.
Ejemplos del uso de background
En esta sección, revisaremos ejemplos del background
acrónimo y sus propiedades singulares equivalentes.
Esta regla hará que el color de fondo sea verde:
background: green;
La regla anterior es equivalente a las siguientes reglas. Tenga en cuenta que todas las propiedades se establecen en sus valores iniciales excepto la propiedad background-color
:
background-color: green; background-position: 0% 0%; background-origin : padding-box; background-attachment: scroll; background-image: none; background-size: auto; background-repeat : repeat; background-clip: border-box;
En cuanto a estas funciones varios parámetros, como ajustar la imagen de fondo se usa (background-image
); para determinar su posición (background-position
) y luego ajusta su escala especificando el valor (background-size
) de la propiedad separándose del valor de la propiedad (background-position
). Tenga en cuenta que la repetición de la imagen de fondo es (background-repeat
), esta se ajustará a través de la palabra reservada round
. Para la posición de la imagen tenemos (background-attachment
) será una constante fija fixed
, y ajustará el valor de las propiedades background-origin
y background-clip
juntos estarán reservados para la palabra border-box
:
background: url(imagen_fondo. png) 40%/10em blue round fixed border-box;
La aplicación anterior es equivalente a las siguientes reglas:
background-color: blue ; background-position: 40 % 50 %; background-size: 10em ; background-repeat: round; background-clip: border-box; background-origin: border-box; background-attachment: fixed; background-image: url(imagen_fondo.png );
Soporte del background por los navegadores
Característica | Chrome | Firefox | Internet Explorer | Ópera | Safari |
---|---|---|---|---|---|
Soporte principal | 1.0 | 1.0 | 4 | 3,5 | 1.0 |
Imágenes SVG como fondo de pantalla | 31.0 | 9.0 | 9.0 | 21,0 | 5.1 |
Valores de propiedades background-size , background-origin y background-clip | 21,0 | 22,0 | 9.0 | 21,0 | 5.1 |
Funcionamiento general de background
La propiedad define background
una o más capas de fondo, las capas están separadas por una coma y la estructura de cada capa es la siguiente:
- Cada capa puede contener como máximo uno de los siguientes valores:
<attachment>
<bg-image>
<position>
<bg-size>
<repeat-style>
- Un valor puede
<bg-size>
aparecer inmediatamente después de un valor y<position>
separado por un carácter «/
«, como encenter/80%
. - El valor
<box>
cero se puede incluir una, una o dos veces; Y si lo configuramos una vez, establecerá el valor de las dos propiedadesbackground-origin
ybackground-clip
, y si lo configuramos dos veces, la primera vez establecerá el valor de la propiedadbackground-origin
y la segunda vez establecerá el valor de la propiedadbackground-clip
. - El valor solo se puede incluir
<background-color>
en la última capa.
<attachment>
Próximamente se escribirá características del background-attachment
.
<box>
Próximamente se escribirá características del background-clip
y background-origin
.
<background-color>
Próximamente se escribirá características del background-color
.
<bg-image>
Próximamente se escribirá características del background-image
.
<position>
Próximamente se escribirá características del background-position
.
<repeat-style>
Próximamente se escribirá características del background-repeat
.
<bg-size>
Próximamente se escribirá características del background-size
.
Estructura de uso
background: [ <bg-layer> , ]* <final-bg-layer>;
Para:
<bg-layer> = <bg-image > || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> { 1,2 } <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat- style> <attachment> || <box> || <box> || <'background-color'>
- Múltiples Constantes en TypeScript
- Estructura de Datos las Colas
- Estructura de Datos las Pilas (Stack)
- Widget Drawer en Flutter
- Clase Scaffold en Flutter
- Estructura del lenguaje Python
- Iteradores y generadores en TypeScript
- Símbolo en TypeScript (Symbol)
- Tipos Avanzados en TypeScript
- Tipos de Compatibilidad en TypeScript
- Inferir Tipos en TypeScript
- Tipos Generalizados (Generics) en TypeScript
- Tipos Básicos de Datos en TypeScript
- Interfaces en TypeScript
- Declaración de Variables en TypeScript
- Funciones en TypeScript
- Categorías en TypeScript
- Introducción a TypeScript
- Clase MaterialApp en Flutter
- Clase Container en Flutter
- ¿Qué son los Widgets en Flutter?
- Introducción a la Arquitectura de Aplicaciones con Flutter
- Lista Doblemente Enlazada
- Listas Vinculadas en Estructura de Datos
- Introducción a las Matrices(Arrays)
- Estructuras de Datos en los Algoritmos de Programación
- Expresión const en JavaScript
- Expresión let en JavaScript
- Introducción al Lenguaje de Programación CSS
- Intérprete de Python