Color de fondo
Transmite significado a través de background-color (color de fondo) y
agrega decoración con degradados.
😎 Esta traducción es parte del proyecto esdocu.com.
Color de fondo
De forma similar a las clases de color de texto contextual, establece el fondo de un elemento en cualquier
clase contextual. Las utilidades de fondo no configuran color, por lo que en
algunos casos querrás usar .text-* utilidades de color.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Gradiente de fondo
Al agregar una clase .bg-gradient, se agrega un degradado lineal como imagen de fondo a los
fondos. Este degradado comienza con un blanco semitransparente que se desvanece hasta el fondo.
¿Necesitas un degradado personalizado en tu CSS? Simplemente agrega
background-image: var(--bs-gradient);.
Opacidad
Añadido en v5.1.0
A partir de v5.1.0, las utilidades background-color se generan con Sass usando variables CSS.
Esto permite cambios de color en tiempo real sin compilación y cambios dinámicos de transparencia alfa.
¿Cómo funciona background-color?
Analicemos nuestra utilidad predeterminada .bg-success.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Usamos una versión RGB de nuestra variable CSS --bs-success (con el valor de
25, 135, 84) y adjuntamos una segunda variable CSS, --bs-bg-opacity, para la
transparencia alfa (con un valor predeterminado 1 gracias a una variable CSS local). Esto
significa que cada vez que usas .bg-success ahora, tu valor de color calculado es
rgba(25, 135, 84, 1). La variable CSS local dentro de cada clase .bg-* evita
problemas de herencia, por lo que las instancias anidadas de las utilidades no tienen automáticamente una
transparencia alfa modificada.
Ejemplo
Para cambiar esa opacidad, sobrescribe --bs-bg-opacity a través de estilos personalizados o
estilos en línea.
<div class="bg-success p-2 text-white">Este es el fondo de success predeterminado</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">Este es el fondo de success con una opacidad del 50%</div>O bien, elije cualquiera de las utilidades .bg-opacity:
<div class="bg-success p-2 text-white">Este es el fondo success predeterminado</div>
<div class="bg-success p-2 text-white bg-opacity-75">Este es un fondo success con una opacidad del 75%</div>
<div class="bg-success p-2 text-dark bg-opacity-50">Este es un fondo success con una opacidad del 50%</div>
<div class="bg-success p-2 text-dark bg-opacity-25">Este es un fondo success con una opacidad del 25%</div>
<div class="bg-success p-2 text-dark bg-opacity-10">Este es un fondo success con una opacidad del 10%</div>Sass
Además de la siguiente funcionalidad de Sass, considera leer sobre nuestras propiedades personalizadas CSS (también conocidas como variables CSS) para colores y más.
Variables
La mayoría de las utilidades de background-color son generadas por nuestros colores de tema,
reasignados desde nuestras variables de paleta de colores genéricas.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));
Los colores en escala de grises también están disponibles, pero solo se usa un subconjunto para generar utilidades.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Mapas
Luego, los colores del tema se colocan en un mapa de Sass para que podamos recorrerlos para generar nuestras utilidades, modificadores de componentes y más.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Los colores en escala de grises también están disponibles como mapa Sass. Este mapa no se usa para generar utilidades.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Los colores RGB se generan a partir de un mapa Sass separado:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Y las opacidades del color de fondo se basan en esto con su propio mapa que consume la API de utilidades:
$utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
Mixins
No se utilizan mixins para generar nuestras utilidades de fondo, pero tenemos algunos mixins adicionales para otras situaciones en las que te gustaría crear tus propios degradados.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
}
}
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
}
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
API de utilidades
Las utilidades de fondo se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a usar la API de utilidades.
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
😎 Esta traducción es parte del proyecto esdocu.com.