Aurrekariak
Transmititu esanahia background-coloreta gehitu gradienteekin dekorazioa.
Atzeko planoaren kolorea
Testu-testuaren kolore-klaseen antzera, ezarri elementu baten atzeko planoa edozein testuinguru-klasetan. Atzeko planoko utilitateak ez dira ezartzen , beraz, kasu batzuetan color.text-* kolore-utilitateak erabili nahi dituzu .
<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>Atzeko planoko gradientea
Klase bat gehituz gero .bg-gradient, gradiente lineal bat gehitzen da atzeko planoei atzeko irudi gisa. Gradiente hau zuri erdi garden batekin hasten da, behealderantz lausotzen dena.
Gradiente bat behar al duzu zure CSS pertsonalizatuan? Gehitu besterik ez background-image: var(--bs-gradient);.
Opakotasuna
v5.1.0 bertsioan gehitu da
5.1.0 bertsiotik aurrera, background-colorutilitateak Sass-ekin sortzen dira CSS aldagaiak erabiliz. Honek denbora errealean kolore aldaketak egiteko aukera ematen du konpilaziorik eta alfa gardentasun aldaketa dinamikorik gabe.
Nola dabil
Demagun gure .bg-successutilitate lehenetsia.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
--bs-successGure (-ren balioarekin ) CSS aldagaiaren RGB bertsio bat erabiltzen dugu 25, 135, 84eta bigarren CSS aldagai bat erantsi dugu, --bs-bg-opacity, alfa gardentasunerako (balio lehenetsi batekin 1CSS aldagai lokal bati esker). Horrek esan nahi du .bg-successorain erabiltzen duzun bakoitzean, kalkulatutako colorbalioa rgba(25, 135, 84, 1). Klase bakoitzaren barneko CSS tokiko aldagaiak .bg-*herentzia-arazoak saihesten ditu, beraz, utilitateen instantzia habiaratuek ez dute automatikoki aldatutako alfa gardentasunik.
Adibidea
Opakutasun hori aldatzeko, baliogabetu --bs-bg-opacityestilo pertsonalizatuen edo lerroko estiloen bidez.
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>Edo, aukeratu .bg-opacityerabilgarritasunetako bat:
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>Sass
Sass-en funtzionaltasun honetaz gain, kontuan hartu gure barneko CSS propietate pertsonalizatuei buruz (aka CSS aldagaiak) koloreei eta gehiagori buruz irakurtzea.
Aldagaiak
Erabilgarritasun gehienak background-colorgure gaiaren koloreek sortzen dituzte, gure kolore-paleta aldagai generikoetatik berriro esleituta.
$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));
Gris-eskalako koloreak ere eskuragarri daude, baina azpimultzo bat bakarrik erabiltzen da utilitateak sortzeko.
$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;
Mapa
Ondoren, gaiaren koloreak Sass mapa batean jartzen dira, haien gainean begiztatu ahal izateko gure utilitateak, osagaien modifikatzaileak eta abar sortzeko.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Gris-eskalako koloreak Sass mapa gisa ere eskuragarri daude. Mapa hau ez da erabilgarritasunik sortzeko.
$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
);
RGB koloreak Sass mapa bereizi batetik sortzen dira:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Eta atzeko planoko kolore opakotasunak hortik eraikitzen dira utilitateen APIak kontsumitzen duen mapa propioarekin:
$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");
Mixinak
Ez da mixin-ik erabiltzen gure atzeko tresnak sortzeko , baina baditugu mixin gehigarri batzuk zure gradienteak sortu nahi dituzun beste egoeretarako.
@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);
}
Utilities APIa
Atzeko planoko utilitateak gure utilitateen APIan deklaratzen dira scss/_utilities.scss. Ikasi utilitateen APIa erabiltzen.
"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
)
),