Color de fondo de la división. Fondo en CSS (color, posición, imagen, repetición, archivo adjunto): todo para configurar el color de fondo o la imagen de fondo de los elementos HTML. Controlar el tamaño de la imagen de fondo

con la ayuda colores CSS y fondo Puedes asignarlo a casi cualquier elemento de una página web, controlar libremente la imagen de fondo y su repetición horizontal y vertical. Además de esto, usando CSS Puede colocar la imagen de fondo en cualquier lugar de la pantalla mediante el posicionamiento. No nos adelantemos mucho por ahora, vayamos en orden.

propiedad COLOR

Esta propiedad especifica el color del elemento, o más precisamente, el color del texto dentro del elemento. El valor se especifica en una de las formas posibles:

• nombre del color (VERDE, NEGRO, ROJO...);
• código de color hexadecimal (008000, 000000, FF0000...);
• código de color decimal en RGB (color:rgb (40, 175, 250));

La propiedad COLOR se hereda, y si no valor establecido Para cualquier elemento, el valor se hereda de su antepasado. Pero puede suceder que tampoco esté configurado para el antepasado; entonces la hoja de estilo del navegador se aplicará utilizando los valores predeterminados. El color del elemento en este caso probablemente será negro.

Como ya mencioné, puedes establecer un color para casi todos los elementos, estos pueden ser (H1... H6), (strong, em) e incluso números enteros (p) e incluso bordes de tabla, pero hablaremos de eso más adelante.

Veamos un ejemplo de cómo configurar el color del texto usando CSS:

h1 (color: azul)

En este ejemplo, todos los encabezados de primer nivel de la página web serán azules:

fuerte (color: rojo)

En este caso, todo lo que esté en el texto de la página se resaltará con la etiqueta fuerte, se pondrá rojo.

Puedes escribirlo así:

h1, p, fuerte (color: verde)

Luego los títulos del primer nivel, todos los párrafos y todo lo que esté resaltado con una etiqueta serán de color verde.

¿Cuándo es necesario resaltar los títulos? diferentes colores, luego se aplican selectores de clases. Para definir una clase en HTML se utiliza el atributo clase, que se puede aplicar a cualquier elemento. En el código HTML deberás escribir:

clase="Azul" > El color del encabezado de esta clase será azul.

En la hoja de estilos CSS, en este caso, escribimos una regla donde el selector será el elemento H1, y a través del punto ( . ) nombre de clase:

h1.Azul (color: azul)

En los documentos HTML también se utilizan selectores por identificador, están determinados por el atributo; identificación. Un identificador es un atributo más significativo o prioritario que una clase. Y si se especifican tanto una clase como un identificador para un elemento en el código HTML, entonces se aplicará el estilo del identificador. El identificador se indica mediante un signo de almohadilla ( # ). Para utilizar el identificador en código HTML, deberá escribir:

id="Azul" > El color del encabezado de esta identificación será azul.

En la hoja de estilo a su vez:

h1#Azul (color: azul)

Propiedad COLOR DE FONDO

Esta propiedad le permite establecer el color de fondo de la página en su conjunto, de un párrafo, de un enlace o, en general, de cualquier elemento HTML. Para hacer esto, el valor de la propiedad especifica un color o valor. transparente(transparente). El código para el fondo de la página está escrito:

cuerpo (color de fondo: aguamarina)

En este caso, el fondo de la página será color turquesa, y para darle fondo al título escribimos:

h1 (color de fondo: amarillo)

Obtenemos un fondo amarillo para los títulos del primer nivel.

Color y fondo en CSS

Propiedad de repetición de fondo

Esta propiedad se utiliza cuando se establece para determinar si se repetirá horizontal y verticalmente. Valores válidos:

• repetir- la imagen se repite vertical y horizontalmente;
• repetir-x- la imagen se repite sólo horizontalmente;
• repetir-y- la imagen se repite sólo verticalmente;
• no repetir- la imagen no se repite.

El código está escrito así:

pag(
imagen de fondo: URL ( dirección del archivo de imagen) ;
repetición de fondo: repetir-x
}

El texto de este párrafo aparecerá en la parte superior. imagen de fondo, que se ubicará de forma horizontal.

Propiedad de ANTECEDENTES ADJUNTOS

Esta propiedad se utiliza para indicarle al navegador si la imagen de fondo de la página debe desplazarse con texto ( voluta) o permanecer inmóvil ( fijado).

cuerpo (
imagen de fondo: URL ( dirección del archivo de imagen) ;
repetición de fondo: repetir-x;
adjunto de fondo: fijo
}

En este caso, la imagen de fondo permanecerá inmóvil.

Propiedad POSICIÓN DE FONDO

Esta propiedad se utiliza para posicionar la imagen en relación con . Los valores se especifican en porcentajes (%), en unidades de longitud (cm, px), con palabras clave:

• Vertical:
• arriba- la parte superior de la imagen está alineada con el borde superior de la página o bloque;
• centro
• abajo- la parte inferior de la imagen está alineada con borde inferior página o bloque.
• Horizontal:
• izquierda- el borde izquierdo de la imagen está alineado con el borde izquierdo de la página o bloque;
• centro- el centro de la imagen está alineado con el centro de la página o bloque;
• bien- el borde derecho de la imagen está alineado con el borde derecho de la página o bloque.

Escribimos un código de ejemplo en porcentajes, unidades de longitud y palabras clave:

cuerpo (
imagen de fondo: URL ( dirección del archivo de imagen) ;
posición de fondo: 0% 0%
}

Cuerpo (
imagen de fondo: URL ( dirección del archivo de imagen) ;
posición de fondo: 10px 25cm
}

Cuerpo (
imagen de fondo: URL ( dirección del archivo de imagen) ;
posición de fondo: centro superior
}

Hola, queridos lectores del blog. Hoy veremos cinco reglas CSS que le permiten establecer un fondo para cualquier elemento en HTML: posición de fondo (imagen, repetición, color, archivo adjunto). Bueno, tampoco olvidemos mencionar la regla compuesta de fondo.

No hay nada complicado en esto, pero sí ciertas sutilezas y matices que necesitas saber y ya plantilla preparada(recuerde lo que ayudará a revelar todos los entresijos de cualquier diseño).

Permítanme recordarles una vez más que este artículo es parte de una serie y sería mejor comenzar a estudiar el marcado de estilo desde el principio, es decir, con un artículo sobre qué es CSS y para qué se usa, y luego seguir en el orden indicado. en el libro de referencia. Aunque, en cualquier caso, depende de usted, pero ahora hablemos de configurar el fondo.

Color, color de fondo e imagen de fondo

Veamos primero cómo se establece el color. elementos HTML usando reglas de color css. De hecho, aquí todo es sencillo. La sintaxis es completamente normal y puedes configurar el color de acuerdo con cómo se hizo en el lenguaje de marcado de hipertexto. Como recordarás, colocado después del signo de almohadilla (hash - “#fe35a3”), o usando tres dígitos, si el primero coincide con el valor del segundo, el tercero con el cuarto y el quinto, respectivamente, con el sexto ( El código de color “#aa33ff” se puede escribir brevemente como "a3f").

También colores en HTML y codigo css se puede representar como palabras (por ejemplo, "rojo"), pero la mayoría de las veces se utiliza el código hexadecimal:

Color:#303

Como ejemplo, coloreé este pequeño párrafo del mismo color que el anterior (#303). Ahora es ligeramente diferente del color de todos los demás párrafos (más oscuro), que está establecido en #555 en archivo css usado por mi temas de WordPress. Pero configurar el color usando color es bastante sencillo, pero con el fondo será un poco más complicado.

Entonces, para el fondo en css Hay cinco reglas que se pueden combinar en una sola si se desea. Para verlos, puede ir a la página de especificaciones actual del W3C y buscar cualquier cosa con la palabra Fondo:

1. color de fondo: con esta regla, establece el color de fondo para cualquier elemento HTML. Puede utilizar un código o el nombre de la sombra, es decir. Todo es exactamente igual que cuando se usaba color.

imagen de fondo: con ella puede usar una imagen como fondo (pero asegúrese de leer sobre esto, porque las imágenes pesadas ralentizarán la carga de las páginas), cuya ruta se indicará en la funcionalidad URL ().

Si miras las especificaciones verás que color de fondo predeterminado cualquier elemento será transparente (el valor predeterminado de la regla es “color de fondo: transparente”). Es cierto que en los elementos no será transparente de forma predeterminada, porque Este elementos del sistema y con ellos todo es diferente y diferente de las etiquetas ordinarias del lenguaje de marcado de hipertexto.

El color del color de fondo se establece como estándar (seis o tres dígitos código hexadecimal, o palabra):

Color de fondo:#FEFCDE

Por ejemplo, el fondo de este párrafo se especifica usando color de fondo con el código de color que figura justo arriba.

Las otras cuatro reglas CSS solo afectarán imagen de fondo, que se puede configurar para cualquier elemento HTML y, si se desea, posicionar con precisión. El archivo gráfico que se utilizará se puede especificar usando imagen de fondo.

Si observa la especificación del lenguaje de marcado, verá que la imagen de fondo tiene el valor predeterminado "ninguno" (es decir, no se utiliza ninguna imagen para el fondo). Bueno, si aún necesitas esto, entonces en la funcionalidad url() deberás indicar la ruta:

Imagen de fondo:url(https://site/image/comment_top_focus.gif);

Por ejemplo, para este párrafo utilicé un archivo gráfico con un fondo, cuya ruta se describe justo arriba. Verá que toda el área asignada para este párrafo está cubierta con una imagen repetida, que en el original se ve así:

Aquellos. cuando se usa solo una regla de imagen de fondo que indica la ruta al archivo gráfico, esta misma imagen se multiplicará tanto vertical como horizontalmente hasta cubrir toda el área asignada en la página web para este elemento HTML específico (en nuestro ejemplo era un párrafo). ¿Por qué sucede esto?

Repetición de fondo: repite la imagen de fondo

Sí, porque no especificamos ningún valor para la regla CSS. repetición de fondo, lo que significa que se utilizará el valor predeterminado. Mirando la especificación, encontramos que este valor corresponde a "repetir" (repetir la imagen en todos los ejes). La respuesta fue natural.

Por lo tanto, con la repetición en segundo plano podemos gestionar las repeticiones de imágenes de fondo. Esta regla sólo puede tener cuatro significados:




Posición de fondo: posicionamiento de fondo

Ahora surge la pregunta: ¿es posible alejar la imagen de fondo de la esquina superior izquierda del área que limita el tamaño del elemento? Por supuesto que puedes, y existe una regla separada para este propósito. posición de fondo:



Al observar la especificación CSS, queda claro por qué la imagen de fondo de forma predeterminada se presiona exactamente en el borde superior izquierdo del área del elemento HTML. Porque el valor "0% 0%" es el valor predeterminado para la regla de posición de fondo.

Bueno, ¿cuándo entra en vigor esta regla? explícitamente no se especifica para el elemento (como en nuestro caso), entonces el navegador selecciona su valor predeterminado, que se acepta en la especificación (tenga en cuenta que los ejes de coordenadas en CSS se informan exactamente desde el borde superior izquierdo del área del elemento).

También queda claro en la especificación que para posicionar la imagen de fondo usando la posición de fondo, puede usar valores tanto relativos (porcentajes) como absolutos (por ejemplo, ). Bueno, también puedes usar palabras que correspondan a ciertos valores digitales. Pero primero lo primero.

Al configurar la posición de la imagen de fondo usando unidades absolutas en posición de fondo se utiliza el siguiente principio para determinar su posición final:

Aquellos. el navegador calculará los desplazamientos especificados a lo largo de los ejes X e Y desde el origen del área en la que se coloca el objeto hasta el origen de esta imagen. Por ejemplo, en este párrafo coloqué la imagen de fondo mediante la posición de fondo usando las siguientes reglas CSS:

Imagen de fondo:url(https://sitio/imagen/logo.png); repetición de fondo: sin repetición; posición de fondo: 400px 25px;

Tenga en cuenta que está en en este caso se alineará con el centro del área de visualización y no con el centro del área asignada para estos párrafos. Está claro que, en realidad, es poco probable que se utilice dicha colocación de una imagen de fondo.

Sin embargo, si establece una posición de fondo fija para elementos como Body o Html (es decir, en etiquetas que cubren toda la página web), entonces esta foto siempre estará visible en el área de visualización y esta es precisamente la aplicación que la propiedad CSS background-attachment encuentra en el diseño de bloques moderno.

hay mas regla prefabricada Fondo, que le permite combinar las cinco reglas descritas anteriormente en una sola botella. Además, los valores de los cinco en la versión combinada se pueden utilizar en cualquier orden y en cualquier cantidad (son únicos y el navegador no los confundirá entre sí). Todo lo que no especifique explícitamente será contado por el navegador. igual al valor por defecto.

Png) no repetición 50%;

El ejemplo de regla prefabricada se aplica a este párrafo para mayor claridad. No quedó bonito, pero eso no es lo principal. Para este párrafo se utiliza relleno de fondo extraño amarillo, y también utiliza una imagen del logotipo de Liveinternet, alineado en el centro del párrafo. Porque Si a la regla de conexión en segundo plano no se le asigna ningún valor, entonces se utiliza el valor de desplazamiento (el valor predeterminado).

Si para algún elemento desea establecer solo un relleno de color y no molestarse con una imagen de fondo, puede hacer esto en su lugar:

Color de fondo:#FEFCDE

escribir:

Antecedentes:#FEFCDE

Porque todo lo demás importa reglas prefabricadas se tomará de forma predeterminada, que es lo que necesitaba.

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Puedes ver más vídeos entrando a

");">


Quizás te interese

Estilo de lista (tipo, imagen, posición): reglas CSS para personalizar la apariencia de las listas en código HTML Cómo configurar el color de fondo alternativo de filas de tablas, listas y otros elementos HTML en el sitio usando la pseudoclase nth-child
Posición (absoluta, relativa y fija) - métodos posicionamiento HTML elementos en CSS (reglas izquierda, derecha, arriba y abajo)
Flotar y borrar en CSS - herramientas diseño de bloque
Posicionamiento usando índice Z y regla CSS Cursor para cambiar el cursor del mouse.

Breve información

Versiones CSS

Valores

url El valor es la ruta a archivo gráfico, que se especifica dentro de la construcción url(). La ruta al archivo se puede escribir entre comillas (simples o dobles) o sin ellas.

none Desactiva la imagen de fondo del elemento.

HTML5 CSS2.1 IE Cr Op Sa Fx

imagen de fondo

modelo de objetos

document.getElementById("elementID ").estilo.fondoImagen Navegadores

Explorador de Internet

hasta la versión 7.0 inclusive, aplica el fondo al borde interior de un elemento que tiene la propiedad hasLayout establecida. Si el elemento no tiene hasLayout , la propiedad background-image respetará los bordes del elemento, como se especifica en la especificación. La diferencia en la visualización se notará si los bordes son discontinuos o punteados en lugar de sólidos.

Si el elemento está configurado para desplazamiento o auto, Internet Explorer 8 tendrá un retraso vertical de un píxel cuando el fondo se desplace. Las versiones de Internet Explorer hasta la 7.0 inclusive no admiten el valor heredado.

none Desactiva la imagen de fondo del elemento.

1

2

3

), luego Chrome, Safari e iOS lo muestran no como lo prescribe la especificación, es decir, para cada celda por separado. Mientras que el navegador debería mostrar un fondo sólido para toda la fila. El ejemplo 2 muestra el código que demuestra el error. Antecedentes de TR Resultado este ejemplo V Navegador de Internet Explorer, Opera y Firefox muestran correctamente el fondo de la línea (Fig. 2).

Arroz. 1. Repita el fondo para cada celda.

Arroz. 2. Fondo para toda la línea.

Creo que no hay un solo sitio donde la propiedad no sea utilizada. fondo css . Parecería que ¿qué podría ser más sencillo que esta propiedad? Pero no, sus capacidades son mucho más amplias uso normal imágenes o colores como fondo de la página. Algunas cosas les resultarán familiares, mientras que otras probablemente serán nuevas para muchos. En cualquier caso, será útil conocer a fondo cómo funciona el fondo.

CSS3 trajo muchas cosas nuevas a la propiedad, como la transparencia y la asignación de varias imágenes como fondo, pero hablaremos de esto a continuación, pero primero veremos los conceptos básicos de la propiedad. fondo.

color de fondo

Estoy más que seguro que ya le has asignado el color de fondo más de una vez. Esto se puede hacer usando varios tipos de notación: notación regular (se usa el nombre del color), hexadecimal o RGB. Cada tipo es equivalente, usa el que más te guste. Intento utilizar la opción más corta y, para una percepción más sencilla, el archivo de estilo resultante es un poco más pequeño.

P (color de fondo: rojo;) p (color de fondo: #f00;) p (color de fondo: #ff0000;) p (color de fondo: rgb(255, 0, 0;))

CSS3 admite transparencia, por lo que podemos agregarla a nuestro color, por ejemplo así:

P (color de fondo: rgba(255, 0, 0, 0.5);)

La última cifra fijó la transparencia en 50%. Puede establecer el valor de transparencia desde 0 (totalmente fondo transparente) a 1 (completamente opaco).

imagen de fondo

Esta propiedad también se usa con mucha frecuencia; le permite asignar una imagen al fondo. CSS3 ha agregado la capacidad de asignar múltiples imágenes al fondo, cada una creando su propia capa, por lo que cada una de las siguientes se superpone a la anterior. ¿Por qué podría ser útil esto? Todo es bastante simple: digamos que necesitas atornillar pequeños adornos en cada rincón del sitio. Proporcionado más o menos diseño de goma Usar una imagen no es una opción. Por lo tanto, hacemos 4 “capas”, movemos cada imagen a su propia esquina y listo, el problema está solucionado.

Cuerpo (imagen de fondo: url("imagen1"), url("imagen2"), url("imagen3"))

Si necesita asignar una imagen al fondo, dejamos solo la primera en el código, creo que esto es comprensible.
Al utilizar imágenes como fondo, debes recordar dos reglas:

• colocar color contrastante fondo en caso de que el usuario no vea la imagen por algún motivo. Simplemente puede desactivar la visualización de imágenes, ahorrando tráfico.
• no utilice una imagen de fondo para transmitir cualquier información importante. Por los motivos expuestos anteriormente, es posible que el usuario no lo vea.

La compatibilidad con múltiples imágenes de fondo es bastante amplia. Todos los navegadores, incluso IE8, admiten esta propiedad.

Del autor: Hola a todos. Los colores de fondo y las imágenes juegan un papel muy importante en el diseño web, ya que permiten diseñar cualquier elemento de forma más atractiva. Hoy veremos cómo crear un fondo en HTML.

¿Es posible utilizar HTML para establecer el fondo?

Diré de inmediato que no. En general, HTML no fue creado para diseñar páginas web. Es simplemente muy inconveniente. Por ejemplo, hay atributo bgcolor, con el que puedes configurar el color de fondo, pero esto es muy inconveniente.

En consecuencia, utilizaremos mesas en cascada estilos (css). hay mucho más posibilidades para establecer el fondo. Hoy veremos los más básicos.

¿Cómo configurar el fondo usando CSS?

Entonces, antes que nada, debes decidir en qué elemento deseas establecer el fondo. Es decir, necesitamos encontrar un selector en el que escribiremos una regla. Por ejemplo, si necesita configurar el fondo para toda la página, puede hacerlo a través del selector de cuerpo y para todos los bloques a través del selector div. Bueno, etc El fondo puede y debe estar vinculado a cualquier otro selector: clases de estilo, identificadores, etc.

Una vez que haya decidido el selector, debe escribir el nombre de la propiedad. Para establecer el color de fondo (es decir, color sólido, no un degradado o una imagen) se utiliza la propiedad color de fondo. Después de eso, debes poner dos puntos y escribir el color en sí. Esto se puede hacer de diferentes maneras. Por ejemplo, usando palabras clave, código hexadecimal, formatos rgb, rgba, hsl. Cualquier el método funcionará.

El método más utilizado es el código hexadecimal. Para seleccionar colores, puede utilizar un programa que muestre el código de color. Por ejemplo, photoshop, paint o alguna herramienta online. En consecuencia, como ejemplo, escribiré un trasfondo general para toda la página web.

cuerpo (color de fondo: #D4E6B3;)

Este código debe pegarse en sección de cabeza. Es importante que los archivos estén en la misma carpeta.

Imagen como fondo

Usaré un pequeño ícono para la imagen. lenguaje html:

Creemos un bloque vacío con un identificador:

< div id = "bg" > < / div >

Démosle dimensiones y antecedentes explícitos:

#bg(ancho: 400px; alto: 250px; imagen de fondo: url(html.png); )

#bg( ancho: 400px; altura: 250 píxeles; imagen de fondo: URL (html.png);

En este código puedes ver que utilicé una nueva propiedad: imagen de fondo. Está diseñado específicamente para insertar una imagen como fondo de un elemento html. Veamos qué pasó:

Para especificar una imagen, debe escribir después de los dos puntos palabra clave url y luego indique la ruta al archivo entre paréntesis. En este caso, la ruta se especifica en función del hecho de que la imagen está en la misma carpeta que el documento html. También debe especificar el formato de la imagen.

Si ha hecho esto y el fondo aún no se muestra en el bloque, verifique nuevamente si ha escrito correctamente el nombre de la imagen, si la ruta y la extensión se han configurado correctamente. Estos son los mas razones comunes que el fondo simplemente no aparece porque el navegador no puede encontrar la imagen.

¿Pero notaste una cosa? El navegador tomó y multiplicó la imagen a lo largo del bloque. Entonces, para que lo sepas, este es el comportamiento predeterminado de las imágenes de fondo: se repiten vertical y horizontalmente siempre que quepan en el bloque. Mediante este comportamiento puedes controlarlo fácilmente. Para hacer esto, use la propiedad de repetición de fondo, que tiene 4 valores principales:

Repetir – valor predeterminado, la imagen se repite en ambos lados;

Repetir-x – se repite solo en el eje x;

Repetir-y: se repite solo a lo largo del eje y;

No repetir – no se repite en absoluto;

Puedes escribir cada valor y ver qué sucede. Lo escribiré así:

repetición de fondo: repetición-x;

fondo-repetir: repetir-x;

Ahora repita solo horizontalmente. Si establece que no se repita, solo habrá una imagen.

Genial, podemos terminar esto ahora, ya que esto capacidades básicas Trabaja con el fondo, pero te mostraré 2 propiedades más que te permitirán tener más control.

A través de la repetición, los diseñadores de diseño solían poder crear texturas de fondo y degradados usando una imagen pequeña. Podría tener 30 por 10 píxeles o incluso menos. O tal vez un poco más. La imagen era tal que cuando se repetía en uno o incluso en ambos lados, no se veían transiciones, por lo que el resultado era un fondo único y sin costuras. Por cierto, este enfoque debería utilizarse ahora si desea utilizar textura perfecta en su sitio web como fondo. Hoy en día, el gradiente ya se puede implementar utilizando métodos css3, definitivamente hablaremos de esto más adelante.

Posición de fondo

De forma predeterminada, la imagen de fondo, a menos que esté configurada para repetirse, estará a la izquierda esquina superior tu bloque. Pero la posición se puede cambiar fácilmente usando la propiedad de posición de fondo.

Puedes configurarlo de diferentes maneras. Una opción es simplemente indicar los lados en los que debe ubicarse la imagen:

posición de fondo: arriba derecha;

posición de fondo: arriba derecha;

Es decir, verticalmente todo sigue igual: la imagen de fondo se ubica arriba, pero horizontalmente cambiamos el lado a la derecha, es decir, a la derecha. Otra forma de establecer una posición es como porcentaje. En este caso, la cuenta atrás comienza en cualquier caso desde la esquina superior izquierda. 100% - todo el bloque. Así, para situar la imagen exactamente en el centro, la escribimos así:

posición de fondo: 50% 50%;

posición de fondo: 50% 50%;

Recuerde una cosa importante sobre el posicionamiento: el primer parámetro es siempre la posición horizontal y el segundo es la posición vertical. Entonces, si ve un valor de 80% 20%, puede concluir inmediatamente que la imagen de fondo se desplazará mucho hacia la derecha, pero no bajará mucho.

Y finalmente, puedes especificar la posición en píxeles. Todo es igual, solo que en lugar de % habrá px. En algunos casos, dicho posicionamiento puede ser necesario.

Notación taquigráfica

De acuerdo en que el código resulta bastante engorroso si todo está configurado como lo hicimos nosotros. Resulta que es necesario especificar la ruta a la imagen, la repetición y la posición. Por supuesto, la repetición y la posición no siempre son necesarias, pero en cualquier caso sería más correcto utilizar una notación abreviada para la propiedad. Se parece a esto:

fondo: #333 url(bg.jpg) sin repetición 50% 50%;

fondo: #333 url(bg.jpg) sin repetición 50% 50%;

Es decir, el primer paso es grabar el color de fondo sólido general, si es necesario. Luego el camino hacia la imagen, la repetición y la posición. Si algún parámetro no es necesario, simplemente omítalo. De acuerdo, esto es mucho más rápido y conveniente, y también reducimos significativamente nuestro código. En general, te aconsejo que escribas siempre de forma abreviada, aunque sólo necesites indicar un color o una imagen.

Controlar el tamaño de la imagen de fondo

Nuestra imagen actual no es muy buena para demostrar el siguiente truco, así que tomaré otra. Sea del tamaño de un bloque o más. Entonces, imagina que te enfrentas a la tarea de hacer una imagen de fondo para que no ocupe completamente su bloque. Y la imagen, por ejemplo, es incluso más grande que el tamaño del bloque.

¿Qué puedes hacer en este caso? Por supuesto, la opción más sencilla y razonable sería simplemente reducir la imagen, pero no siempre es posible hacerlo. Digamos que se encuentra en el servidor y en en este momento no hay tiempo ni oportunidad para reducirlo. El problema se puede resolver utilizando la propiedad background-size, que puede considerarse relativamente nueva y que permite manipular el tamaño de la imagen de fondo, o incluso de cualquier fondo.

Entonces mi imagen ahora ocupa todo el espacio en el bloque, pero le daré un tamaño de fondo:

tamaño de fondo: 80% 50%;

tamaño de fondo: 80% 50%;

Nuevamente, el primer parámetro establece el tamaño horizontal, el segundo, el tamaño vertical. Vemos que todo se aplicó correctamente: la foto se convirtió en el 80% del ancho del bloque en ancho y la mitad en alto. Aquí solo necesita hacer una aclaración: al establecer el tamaño como porcentaje, puede influir en las proporciones de la imagen. Así que tenga cuidado si no quiere alterar las proporciones.

Como puedes adivinar, el tamaño del fondo también se puede especificar en píxeles. Hay dos mas significados de palabras clave, que también se puede utilizar:

Portada: la imagen se escalará de modo que al menos en un lado llene completamente el bloque.

Contener: lo escala para que la imagen encaje completamente en el bloque en su tamaño máximo.

La ventaja de estos valores es que no cambian las proporciones de la imagen, dejándolas iguales.

También debe comprender que estirar la imagen puede provocar un deterioro de su calidad. Puedo dar un ejemplo de la vida y práctica real diseñadores de maquetación. Todo el mundo sabe y comprende que al diseñar para escritorios, es necesario adaptar el sitio a los anchos del monitor principal: 1280, 1366, 1920. Si toma una imagen de fondo de, digamos, 1280 por 200 y no le da un fondo. tamaño, luego pantallas con un ancho mayor Aparecerá un espacio vacío, la imagen no llenará el ancho por completo.

En el 99% de los casos, esto no le conviene al desarrollador web, por lo que establece el tamaño de fondo: cubierta para que la imagen siempre se extienda hasta el ancho máximo de la ventana. Este buena bienvenida, que debería usarse, pero ahora se enfrentará al problema de que los usuarios con un ancho de pantalla de 1920 píxeles pueden ver una calidad de imagen subóptima.

Déjame recordarte que se estirará hasta su ancho máximo. En consecuencia, la calidad se deteriorará automáticamente. Solo la decisión correcta Inicialmente usaré la imagen aquí. tamaño más grande– 1920 píxeles de ancho. Entonces en el mismo pantallas anchas estará en su tamaño natural, y en otros simplemente se recortará gradualmente, pero al mismo tiempo, con la selección adecuada de la imagen de fondo, en apariencia Esto no afectará el sitio.

En general, este es sólo un ejemplo de cómo utilizar el conocimiento adquirido en este artículo al diseñar diseños reales.

Fondo translúcido usando CSS

Otra característica que se puede implementar con usando css – fondo translúcido. Es decir, a través de este fondo se podrá ver qué hay detrás.

Como ejemplo, estableceré la página completa como fondo de la imagen que usamos anteriormente en los ejemplos. Para el bloque con identificador bg, en el que realizamos todos nuestros experimentos, configuraremos el fondo usando el formato de tarea. colores rgba.

Como dije antes, existen muchos formatos para configurar colores en CSS. Uno de ellos es rgb, suficiente. formato conocido a quienes trabajan en editores gráficos. Está escrito así: rgb(17, 255, 34);

El primer valor entre paréntesis es la saturación de rojo, luego verde y luego azul. El valor puede ser numérico de 0 a 255. En consecuencia, formato rgba No es diferente, sólo se agrega un parámetro más: el canal alfa. El valor puede ser de 0 a 1, donde 0 es transparencia total.