EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Colores y fondo en CSS, atributos y propiedades

            Colores y fondo CSS

            Colores y fondo en CSS, atributos y propiedades

            5. Colores y fondo en CSS

            En esta sección veremos las propiedades de los colores y los fondos en CSS.

            Contenidos del artículo

            • 5. Colores y fondo en CSS
            • 5.1. Valores de los colores
            • 5.2. Tabla de colores básicos
            • 5.3. Propiedades más utilizadas
              • 5.3.1. color – Color del texto
              • 5.3.2. background-color – Color de fondo
              • 5.3.3. background-image – Imagen de fondo
              • 5.3.4. background-repeat – Repetición de la imagen de fondo
              • 5.3.5. background-attachment – Desplazamiento de la imagen de fondo
              • 5.3.6. background-position – Posición de la imagen de fondo
              • 5.3.7. background-size – Tamaño de la imagen de fondo
              • 5.3.8. opacity – Opacidad del Elemento
            • 5.4. Ejemplo práctico

            5.1. Valores de los colores

            Los valores de los colores se pueden definir de varias formas:

            • Nombre predefinido: red, yellow, blue, green…
            • Código hexadecimal: #RRGGBB o #RRGGBBAA
            • RGB: Red, Green, Blue
            • RGBA: Red, Green, Blue, Alpha
            • HSL: Hue, Saturation, Lightness
            • HSLA: Hue, Saturation, Lightness, Alpha

            En nuestro caso, vamos a utilizar los valores definidos por su nombre, código hexadecimal y RGB o RGBA. El resto de valores no se van a utilizar.

            5.2. Tabla de colores básicos

            HTML soporta alrededor de 140 nombres de colores diferentes. Entre ellos puedes encontrar los siguientes colores básicos:

            Table 5.1. Colores básicos
            Color Nombre HEX RGB
            black#000000 0,0,0
            white #ffffff 255,255,255
            red #ff0000 255,0,0
            blue #0000ff 0,0,255
            yellow #ffff00 255,255,0
            gray #808080 128,128,128
            green #008000 0,128,0
            Ver lista completa de colores expresados por nombre, hexadecimal y en RGB

            Ejemplo de colores en hexadecimal con transparencia:

            0

            5.3. Propiedades más utilizadas

            Algunas de las propiedades CSS relacionadas con el color y el fondo más utilizadas son las siguientes:

            PropiedadDescripciónValores
            colorColor del textoRGB | HSL | HEX | nombre del color | RGBA | HSLA
            background-colorColor de fondoRGB | HSL | HEX | nombre del color | RGBA | HSLA | transparent
            background-imageImagen de fondourl(«…») | none
            background-repeatRepetición de la imagen de fondorepeat | repeat-x | repeat-y | no-repeat
            background-attachmentDesplazamiento de la imagen de fondoscroll | fixed
            background-positionPosición de la imagen de fondopercentage | length | left | center | right
            background-sizeTamaño de la imagen de fondoauto | cover | contain | valor
            OpacityTransparencia de un elemento[ 0 – 1 ] (0 → totalmente transparente)
            Tabla 5.2. Colores y fondo

            5.3.1. color – Color del texto

            La propiedad color se utiliza para definir el color del texto en un elemento HTML.

            Ejemplo:

            css p { color: #FF0000; /* Color rojo en formato HEX */ }

            5.3.2. background-color – Color de fondo

            La propiedad background-color se utiliza para establecer el color de fondo de un elemento HTML, como un div o una sección.

            Ejemplo:

            div { background-color: rgb(0, 128, 255); /* Color de fondo azul en formato RGB */ }

            Ejercicio propuesto background-color

            Observa el resultado de los siguientes estilos y estudia las diferencias que hay entre los distintos valores definidos.

            .a { background-color: red; }
            .b { background-color: #FF0000; }
            .c { background-color: RGB(255,0,0); }
            .d { background-color: HSL(0,100%,50%); }
            .e { background-color: red; opacity: 0.5; }
            .f { background-color: rgba(255, 0, 0, 0.5); }
            .g { background-color: transparent; }

            0

            5.3.3. background-image – Imagen de fondo

            La propiedad background-image se utiliza para establecer una imagen como fondo de un elemento HTML. Puedes proporcionar la ruta de la imagen usando el formato url("..."). El valor none se utiliza para eliminar cualquier imagen de fondo.

            Ejemplo:

            section { background-image: url("imagen-fondo.jpg"); }

            Ejercicio propuesto background-image

            Agrega los siguientes estilos en una página web y explica las diferencias que hay entre ellos:

            body { background-image: url("https://bit.ly/2slA7jo");}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-x;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-y;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-size: 100px 100px;}

            dark

            5.3.4. background-repeat – Repetición de la imagen de fondo

            La propiedad background-repeat controla la forma en que la imagen de fondo se repite en el elemento. Puedes elegir entre repeat (repetir en ambas direcciones), repeat-x (repetir solo horizontalmente), repeat-y (repetir solo verticalmente) y no-repeat (no repetir la imagen).

            Ejemplo:

             header { background-image: url("patron-fondo.png"); background-repeat: repeat-x; /* Repetir solo horizontalmente */ }

            Ejercicio propuesto background-repeat

            La propiedad background-attachment indica si una imagen se mantiene fija o se desplaza con el resto de la página. Explica las diferencias que encuentras al establecer las siguientes propiedades:

            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: fixed;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: scroll;}

            dark

            5.3.5. background-attachment – Desplazamiento de la imagen de fondo

            La propiedad background-attachment controla si la imagen de fondo se desplaza con el contenido de la página (scroll) o permanece fija en su posición mientras se desplaza el contenido (fixed).

            Ejemplo:

            body { background-image: url("fondo-estrellado.jpg"); background-attachment: fixed; /* Fondo fijo en la ventana */ }

            5.3.6. background-position – Posición de la imagen de fondo

            La propiedad background-position se utiliza para definir la posición inicial de la imagen de fondo dentro del elemento.

            Ejemplos:

            Posición en el Centro Superior: Este ejemplo coloca la imagen de fondo en el centro superior del elemento.

            div { background-image: url("imagen-fondo.jpg"); background-position: center top; }

            Posición en la Esquina Superior Derecha: En este caso, la imagen de fondo se coloca en la esquina superior derecha del elemento.

            div { background-image: url("imagen-fondo.jpg"); background-position: right top; }

            Posición en la Esquina Inferior Izquierda: Aquí, la imagen de fondo se encuentra en la esquina inferior izquierda del elemento.

            div { background-image: url("imagen-fondo.jpg"); background-position: left bottom; }

            Posición Personalizada en Píxeles: Puedes especificar coordenadas en píxeles para posicionar la imagen de fondo de manera precisa.

            div { background-image: url("imagen-fondo.jpg"); background-position: 50px 30px; /* 50px desde la izquierda, 30px desde arriba */ }

            Posición en el Centro del Contenedor: Para centrar la imagen de fondo tanto vertical como horizontalmente en el contenedor.

            div { background-image: url("imagen-fondo.jpg"); background-position: center center; }

            Posición en Porcentajes: Puedes utilizar porcentajes para posicionar la imagen de fondo en relación con el tamaño del elemento.

            div { background-image: url("imagen-fondo.jpg"); background-position: 25% 75%; /* 25% desde la izquierda, 75% desde arriba */ }

            5.3.7. background-size – Tamaño de la imagen de fondo

            La propiedad background-size se utiliza para controlar el tamaño de la imagen de fondo en relación con el elemento que la contiene. La sintaxis de la propiedad background-size es la siguiente:

            background-size: valor;

            Donde «valor» puede ser uno de los siguientes:

            1. auto: Este es el valor predeterminado. La imagen de fondo conserva su tamaño original y se repite si es necesario para llenar el contenedor.
            2. cover: La imagen de fondo se escala para que cubra completamente el contenedor, recortando cualquier exceso que no quepa. Esto puede dar como resultado que la imagen se estire o recorte.
            3. contain: La imagen de fondo se escala para que quepa completamente dentro del contenedor sin recortarla. Puede haber espacio vacío alrededor de la imagen si el contenedor tiene una relación de aspecto diferente a la imagen.
            4. valor personalizado: Puedes especificar el tamaño de la imagen de fondo utilizando valores de longitud (píxeles, em, porcentaje) o usando auto para una de las dimensiones (ancho o alto) y un valor específico para la otra dimensión.

            Ejemplos:

            /* La imagen se ajusta para cubrir completamente el contenedor */
            background-size: cover;
            
            /* La imagen se ajusta para caber completamente dentro del contenedor */
            background-size: contain;
            
            /* La imagen tiene un ancho fijo de 200px y se ajusta automáticamente en altura */
            background-size: 200px auto;
            
            /* La imagen tiene un ancho fijo del 50% del contenedor y una altura fija de 100px */
            background-size: 50% 100px;

            La propiedad background-size es especialmente útil cuando se trabaja con imágenes de fondo en elementos como encabezados, secciones, divs, etc., y se desea controlar cómo se ajusta la imagen de fondo en relación con el tamaño del contenedor.

            5.3.8. opacity – Opacidad del Elemento

            La propiedad opacity se utiliza para controlar la transparencia de un elemento. Un valor de 1 representa opacidad completa (sin transparencia), mientras que un valor de 0 hace que el elemento sea completamente transparente. Los valores entre 0 y 1 permiten un grado variable de transparencia.

            Ejemplo:

            .caja-transparente { background-color: #000; /* Fondo negro */ opacity: 0.7; /* 70% de opacidad */ }

            5.4. Ejemplo práctico

            Este ejemplo representa un típico Call to Action con un contenedor con una imagen de fondo que invita a los usuarios a realizar una acción específica, como comprar un producto o suscribirse a un servicio.

            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <title>Call to Action</title>
                <style>
                    *{font-family: Arial;}
                    .cta-container {
                        background-image: url("cta-background.jpg"); /* Imagen de fondo */
                        background-size: cover; /* Cubre completamente el contenedor */
                        background-position: center center; /* Centra la imagen */
                        background-repeat: no-repeat; /* No se repite la imagen de fondo */
                        background-attachment: fixed; /* Fondo fijo en la ventana */
                        opacity: 0.9; /* Opacidad del contenedor */
                        text-align: center; /* Alineación del contenido al centro */
                        padding: 60px;
                    }
                    .cta-text {
                        font-size: 24px;
                    }
                    .cta-button {
                        background-color: #FF5733; /* Color de fondo del botón */
                        color: #fff; /* Color del texto del botón en blanco */
                        padding: 10px 20px; /* Relleno del botón */
                        border: none; /* Sin borde */
                        border-radius: 5px; /* Bordes redondeados */
                        font-size: 18px;
                        cursor: pointer; /* Cambio de cursor al pasar el ratón */
                    }
                </style>
            </head>
            <body>
                <div class="cta-container">
                    <h2 class="cta-text">¡Descubre nuestro producto estrella!</h2>
                    <p class="cta-text">Obtén un 20% de descuento en tu primera compra.</p>
                    <button class="cta-button">Comprar Ahora</button>
                </div>
            </body>
            </html>

            En este ejemplo, hemos creado un contenedor de llamada a la acción (cta-container) con una imagen de fondo (cta-background.jpg). A continuación, se aplican las siguientes propiedades:

            • background-size: cover: Hace que la imagen de fondo cubra completamente el contenedor.
            • background-position: center center: Centra la imagen de fondo vertical y horizontalmente.
            • background-repeat: no-repeat: Evita que la imagen de fondo se repita.
            • background-attachment: fixed: Fija el fondo en la ventana, lo que crea un efecto de parallax o paralaje.
            • opacity: 0.9: Aplica una opacidad del 90% al contenedor, haciendo que la imagen de fondo sea ligeramente visible a través del contenido.

            El texto dentro del contenedor (cta-text) se centra en el centro del contenedor. El botón de llamada a la acción (cta-button) tiene un color de fondo, un color de texto en blanco, bordes redondeados y un cambio de color al pasar el ratón.

            Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

            0

            Veamos otro ejemplo de Call to Action. En este caso no vamos a usar la propiedad background-attachment: fixed. Como puedes ver, en este ejemplo, no se aprecia el efecto de paralaje, ya que la imagen no queda fija en el fondo y se desplaza junto con el contenedor.

            .hero-image {
              background-image: url("https://www.eniun.com/wp-content/uploads/eniun-home-historia.jpg");
              height: 400px;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              position: relative;
            }

            Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

            0

            Test

            ¿Qué propiedad se emplea para indicar la imagen de fondo de un elemento?

            ¡Bien! ¡Has fallado!

            ¿Qué propiedad se emplea para cambiar el color de fondo de un elemento?

            ¡Bien! ¡Has fallado!

            Indica cuál es el valor en hexadecimal del color negro:

            ¡Bien! ¡Has fallado!

            Para definir que el color de fondo es de color verde se emplea:

            ¡Bien! ¡Has fallado!

            Propiedades colores y fondo
            ¡Muy bien!
            Sigue practicando...

            Navegación de entradas

            ← Unidades de medida en CSS
            Propiedades de texto en CSS →

            Tutorial CSS Nivel Inicial

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Modelo de cajas: márgenes, relleno y bordes
            • 13. Tamaño de los elementos
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Cómo crear un menú horizontal
            • 16. Estilos en formularios CSS
            • 17. Buenas prácticas CSS
            • 18. Herramientas útiles, test de verificación y referencias
            • 19. Test de conocimientos CSS
            • 20. Resumen CSS
            • 21. Ejercicios resueltos CSS

            Tutoriales CSS

            • CSS Inicial
            • CSS Intermedio
            • CSS Avanzado

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Sass
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados