Colores de fondo de espectro

Los colores de espectro son una de las utilidades más útiles, hay dos tipos de cosas en las que podemos usar colores. Al igual que podemos establecer colores para el texto y podemos establecer colores para el fondo.

En este artículo, aprenderemos sobre las diversas clases disponibles para el fondo, además de comprender cómo podemos configurar los colores del fondo en Spectre usando estas clases.

Clase de colores de fondo de espectro:

bg-error: esta clase se utiliza para establecer el fondo con el color rojo.
bg-warning: Esta clase se utiliza para establecer el fondo con un color amarillo.
bg-success: Esta clase se utiliza para establecer el fondo con un color verde.
bg-light: esta clase se usa para configurar el fondo con color blanco.
bg-gray: Esta clase se utiliza para configurar el fondo con un color gris.
bg-dark: esta clase se usa para configurar el fondo con color negro.
bg-secundario: Esta clase se utiliza para establecer el fondo con un color gris claro.
bg-primary: esta clase se utiliza para establecer el fondo con un color azul.

Sintaxis:

<element class="bg-colorname"> Content </element>

El siguiente ejemplo ilustra los colores de fondo de Spectre.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE Background Class</title>
    <link rel="stylesheet"
          href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
          href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
          href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Background Colors Class</strong>
        <br><br>
        <p class="bg-error">
            Error Background Color
        </p>
  
        <p class="bg-warning">
            Warning Background Color
        </p>
  
        <p class="bg-success">
            Success Background Color
        </p>
  
        <p class="bg-light">
            Light Background Color
        </p>
  
        <p class="bg-gray">
            Gray Background Color
        </p>
  
        <p class="bg-dark">
            Dark Background Color
        </p>
  
        <p class="bg-secondary">
            Secondary Background Color
        </p>
  
        <p class="bg-primary">
            Primary background Color
        </p>
    </center>
</body>
  
</html>

Producción:

Clase de fondo de espectro

Referencia: https://picturepan2.github.io/spectre/utilities/colors.html#colors-background

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta