Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

Arka fon

Anlamı iletin background-colorve degradelerle dekorasyon ekleyin.

Arka plan rengi

Bağlamsal metin renk sınıflarına benzer şekilde, bir öğenin arka planını herhangi bir bağlamsal sınıfa ayarlayın. Arka plan yardımcı programları ayarlanmaz , bu nedenle bazı durumlarda color.text-* renk yardımcı programlarını kullanmak isteyeceksiniz .

.bg-birincil
.bg-ikincil
.bg-başarı
.bg-tehlike
.bg-uyarı
.bg-bilgi
.bg-light
.bg-karanlık
.bg-gövde
.bg-beyaz
.bg-şeffaf
html
<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>

Arka plan gradyanı

Bir .bg-gradientsınıf eklenerek, arka planlara arka plan görüntüsü olarak doğrusal bir gradyan eklenir. Bu gradyan, dibe doğru kaybolan yarı saydam bir beyazla başlar.

Özel CSS'nizde bir degradeye mi ihtiyacınız var? Sadece ekleyin background-image: var(--bs-gradient);.

.bg-birincil.bg-gradyan
.bg-sekonder.bg-gradyan
.bg-success.bg-gradyan
.bg-danger.bg-gradyan
.bg-warning.bg-gradyan
.bg-info.bg-gradyan
.bg-light.bg-gradyan
.bg-dark.bg-gradyan

opaklık

v5.1.0'da eklendi

v5.1.0'dan itibaren, background-coloryardımcı programlar CSS değişkenleri kullanılarak Sass ile oluşturulur. Bu, derleme ve dinamik alfa saydamlığı değişiklikleri olmadan gerçek zamanlı renk değişikliklerine izin verir.

Nasıl çalışır

Varsayılan .bg-successyardımcı programımızı düşünün.

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

Alfa şeffaflığı için ( --bs-successdeğeri ile ) CSS değişkenimizin RGB versiyonunu kullanıyoruz 25, 135, 84ve ikinci bir CSS değişkeni ekledik, , ( yerel bir CSS değişkeni sayesinde varsayılan bir değerle). Bu, şu anda ne zaman kullanırsanız kullanın , hesaplanan değerinizin . Her sınıfın içindeki yerel CSS değişkeni, devralma sorunlarını önler, böylece yardımcı programların iç içe geçmiş örnekleri otomatik olarak değiştirilmiş bir alfa saydamlığına sahip olmaz.--bs-bg-opacity1.bg-successcolorrgba(25, 135, 84, 1).bg-*

Örnek

Bu opaklığı değiştirmek için --bs-bg-opacityözel stiller veya satır içi stiller aracılığıyla geçersiz kılın.

Bu varsayılan başarı arka planıdır
Bu %50 opaklık başarısı geçmişidir
html
<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>

Veya yardımcı programlardan herhangi birini seçin .bg-opacity:

Bu varsayılan başarı arka planıdır
Bu, %75 opaklık başarısı geçmişidir
Bu %50 opaklık başarısı geçmişidir
Bu, %25 opaklık başarısı geçmişidir
Bu %10 opaklık başarısı geçmişidir
html
<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>

küstah

Aşağıdaki Sass işlevine ek olarak, renkler ve daha fazlası için dahil edilen CSS özel özelliklerimiz (diğer adıyla CSS değişkenleri) hakkında okumayı düşünün .

Değişkenler

Çoğu background-coloryardımcı program, genel renk paleti değişkenlerimizden yeniden atanan tema renklerimiz tarafından oluşturulur.

$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));

Gri tonlamalı renkler de mevcuttur, ancak herhangi bir yardımcı program oluşturmak için yalnızca bir alt küme kullanılır.

$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;

Harita

Tema renkleri daha sonra bir Sass haritasına yerleştirilir, böylece yardımcı programlarımızı, bileşen değiştiricilerimizi ve daha fazlasını oluşturmak için bunların üzerinde dolaşabiliriz.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Gri tonlamalı renkler, Sass haritası olarak da mevcuttur. Bu harita herhangi bir yardımcı program oluşturmak için kullanılmaz.

$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 renkleri ayrı bir Sass haritasından üretilir:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Ve arka plan rengi opaklıkları, yardımcı programlar API'sı tarafından tüketilen kendi haritalarıyla bunun üzerine kuruludur:

$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");

karışımlar

Arka plan yardımcı programlarımızı oluşturmak için hiçbir karışım kullanılmaz , ancak kendi degradelerinizi oluşturmak istediğiniz diğer durumlar için bazı ek karışımlarımız vardır.

@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--#{$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);
}

Yardımcı Programlar API'sı

Arka plan yardımcı programları, scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.

    "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
      )
    ),