10-fondos en css

Los fondos en css los ponemos con la propriedad background-color

css tiene 6 propriedades para fondos

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background(propiedad abreviada)

background-color

Esta propriedad background-color especifica el color de fondo de un elemento html

ejemplo

Fondo amarillo en un elemento de cabecera H1

Soy una cabecera con fondo amarillo

        h1 {
              background-color: yellow;
            }
    

---

...

como vimos en entradas anteriores, para especificar un color lo podemos hacer de 3 maneras

• un nombre de color válido, como "red"
• un valor HEX - como "#ff0000"
• un valor RGB - como "rgb(255,0,0)"

---

Otros elementos

En css se puede estabelecer un fondo para cada elemento html

Ejemplo

Aquí, los elementos <h1>, <p> y <div> tendrán diferentes colores de fondo:

Div con fondo lightblue

Cabecera con fondo verde

Soy un parrafo con fondo azul

codigo del ejemplo

    h1 {
          background-color: green;
        }
        
        div {
          background-color: lightblue;
        }
        
        p {
          background-color: blue;
        }

---

Opacidad / Transparencia

La propiedad opacity especifica la opacidad/transparencia de un elemento. Puede tomar un valor de 0.0 - 1.0. Cuanto menor sea el valor, más transparente:

Opacity 1

Opacity 0.5

Opacity 0.2

Codigo del ejemplo

        div {
            background-color: green;
            opacity: 0.3;
          }
        

Al usar el propiedad opacity para agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia

Esto puede hacer que el texto dentro de un elemento completamente transparente sea difícil de leer.

---

Transparencia usando RGBA

Si no desea aplicar la transparencia a los elementos secundarios, como en el ejemplo anterior, entonces la solucion es usar los valores RGBA

Los seguinte ejemplos vemos como la transparencia es solo aplicada al fondo y no al texto

Opacity 1

Opacity 0.5

Opacity 0.2

Ejemplo del codigo

    div {
        background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
      }

---

Ir al indice