Couleurs d'arrière-plan Tailwind CSS

Dans Tailwind CSS,la couleur d'arrière-plan(Couleur d'arrière-plan) est l'une des classes utilitaires les plus couramment utilisées, vous permettant de définir rapidement la couleur d'arrière-plan des éléments.

Tailwind offre une variété d'options de couleurs et de nuances différentes, vous permettant d'appliquer flexiblement les styles dont vous avez besoin.

Syntaxe de base des couleurs d'arrière-plan：

<div class="bg-{color}">
  <!-- 内容 -->
</div>

Classes courantes de couleurs d'arrière-plan：

Nom de classe Description Exemple
bg-{color} Définir la couleur d'arrière-plan bg-red-500，bg-blue-200
bg-transparent Définir une couleur d'arrière-plan transparente bg-transparent
bg-current Définir la couleur d'arrière-plan sur la couleur de texte actuelle (couramment utilisée pour les arrière-plans d'icônes) bg-current
bg-white Définir la couleur d'arrière-plan sur blanc bg-white
bg-black Définir la couleur d'arrière-plan sur noir bg-black
bg-gray-{n} Définir la couleur d'arrière-plan sur gris,{n}est la nuance de gris (de 50 à 900) bg-gray-100, bg-gray-700

Dégradés de couleur d'arrière-plan：

Tailwind CSS prend en charge les dégradés linéaires, les dégradés radiaux, et plus encore pour les arrière-plans. Vous pouvez utiliserbg-gradient-to-{direction}pour spécifier la direction du dégradé, et utiliserfrom-{color}、to-{color}pour définir les couleurs de début et de fin du dégradé.

Nom de classe Description Exemple
bg-gradient-to-{direction} Définir la direction de l'arrière-plan en dégradé,directionpeut êtret、r、b、l、tr、tl、br、blwait bg-gradient-to-r(dégradé de gauche à droite)
from-{color} Définir la couleur de départ du fond dégradé from-blue-500
to-{color} Définir la couleur de fin du fond dégradé to-green-300
via-{color} Définir la couleur intermédiaire du dégradé (facultatif) via-purple-400

Exemple

<div class="bg-gradient-to-r from-blue-500 to-green-300 p-10 text-white">
Fond dégradé du bleu au vert
</div>

Opacité de la couleur d'arrière-plan（Opacité）：

Tailwind fournit également des classes utilitaires pour contrôler la transparence de l'arrière-plan. Utilisezbg-opacity-{value}pour définir la valeur d'opacité,{value}un entier de 0 à 100 représentant le pourcentage d'opacité.

Nom de classe Description Exemple
bg-opacity-{n} Définir l'opacité de la couleur d'arrière-plan bg-opacity-50
bg-opacity-0 Définir la couleur d'arrière-plan comme entièrement transparente bg-opacity-0
bg-opacity-100 Définir la couleur d'arrière-plan comme entièrement opaque bg-opacity-100

Exemple

<div class="bg-blue-500 bg-opacity-50 p-10 text-white">
Arrière-plan en bleu semi-transparent
</div>

Couleurs d'arrière-plan personnalisées dans la configuration Tailwind：

Vous pouveztailwind.config.jspersonnalisez les couleurs d'arrière-plan dans le fichier de configuration. En définissant des couleurs sous l'theme.extendattribut de la sectioncolors, vous pouvez étendre le jeu de couleurs par défaut.

Exemple

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1D4ED8',
        'custom-gray': '#4B5563',
      }
    }
  }
}

Utilisez des couleurs d'arrière-plan personnalisées dans le HTML :

Exemple

<div class="bg-custom-blue p-10 text-white">
Utilisation d'un arrière-plan bleu personnalisé
</div>

Exemple complet

Exemple

<!-- Exemple de couleur d'arrière-plan -->
<div class="bg-blue-500 text-white p-6 mb-6">
    <h1 class="text-xl">Arrière-plan bleu</h1>
    <p>Ceci est un conteneur avec un arrière-plan bleu et une couleur de texte blanche.</p>
</div>

<!-- Exemple d'arrière-plan dégradé -->
<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white p-6 mb-6">
    <h1 class="text-xl">Arrière-plan dégradé</h1>
    <p>Ceci est un arrière-plan en dégradé linéaire, du violet au rose puis au rouge.</p>
</div>

<!-- Exemple d'opacité d'arrière-plan -->
<div class="bg-green-500 bg-opacity-50 text-white p-6">
    <h1 class="text-xl">Arrière-plan avec opacité</h1>
    <p>Ceci est un conteneur avec un arrière-plan vert semi-transparent.</p>
</div>

Essayez-le »

Analyse :

Couleur d'arrière-plan de base：

  • bg-blue-500: Définir la couleur d'arrière-plan sur bleu.
  • text-white: Définir la couleur du texte sur blanc.

Arrière-plan dégradé：

  • bg-gradient-to-r: Définir la direction de l'arrière-plan dégradé de gauche à droite.
  • from-purple-500: Définir la couleur de début du dégradé sur violet.
  • to-red-500: Définir la couleur de fin du dégradé sur rouge.

Opacité de l'arrière-plan：

  • bg-opacity-50: Définir l'opacité de la couleur d'arrière-plan sur 50% (semi-transparent).
Autres extensions