Utilitário
Background
Classes utilitárias para cor, opacidade, posicionamento, repetição e gradientes de background.
Cor de background
Background
| Classe CSS | Descrição |
|---|---|
.bg-darker | background-color: var(--color-bg-darker); |
.bg-dark | background-color: var(--color-bg-dark); |
.bg | background-color: var(--color-bg); |
.bg-light | background-color: var(--color-bg-light); |
.bg-lighter | background-color: var(--color-bg-lighter); |
Background contrast scale
| Classe CSS | Descrição |
|---|---|
.bg-contrast-lower | background-color: var(--color-contrast-lower); |
.bg-contrast-low | background-color: var(--color-contrast-low); |
.bg-contrast-medium | background-color: var(--color-contrast-medium); |
.bg-contrast-high | background-color: var(--color-contrast-high); |
.bg-contrast-higher | background-color: var(--color-contrast-higher); |
Background primary
| Classe CSS | Descrição |
|---|---|
.bg-primary-darker | background-color: var(--color-primary-darker); |
.bg-primary-dark | background-color: var(--color-primary-dark); |
.bg-primary | background-color: var(--color-primary); |
.bg-primary-light | background-color: var(--color-primary-light); |
.bg-primary-lighter | background-color: var(--color-primary-lighter); |
Background accent
| Classe CSS | Descrição |
|---|---|
.bg-accent-darker | background-color: var(--color-accent-darker); |
.bg-accent-dark | background-color: var(--color-accent-dark); |
.bg-accent | background-color: var(--color-accent); |
.bg-accent-light | background-color: var(--color-accent-light); |
.bg-accent-lighter | background-color: var(--color-accent-lighter); |
Background feedback
| Classe CSS | Descrição |
|---|---|
.bg-success-darker | background-color: var(--color-success-darker); |
.bg-success-dark | background-color: var(--color-success-dark); |
.bg-success | background-color: var(--color-success); |
.bg-success-light | background-color: var(--color-success-light); |
.bg-success-lighter | background-color: var(--color-success-lighter); |
.bg-warning-darker | background-color: var(--color-warning-darker); |
.bg-warning-dark | background-color: var(--color-warning-dark); |
.bg-warning | background-color: var(--color-warning); |
.bg-warning-light | background-color: var(--color-warning-light); |
.bg-warning-lighter | background-color: var(--color-warning-lighter); |
.bg-error-darker | background-color: var(--color-error-darker); |
.bg-error-dark | background-color: var(--color-error-dark); |
.bg-error | background-color: var(--color-error); |
.bg-error-light | background-color: var(--color-error-light); |
.bg-error-lighter | background-color: var(--color-error-lighter); |
Preto & branco
| Classe CSS | Descrição |
|---|---|
.bg-white | background-color: var(--color-white); |
.bg-black | background-color: var(--color-black); |
Misc
| Classe CSS | Descrição |
|---|---|
.bg-transparent | background-color: transparent; |
.bg-inherit | background-color: inherit; |
Opacidade do background
Combine uma classe de opacidade com qualquer utilitário de cor de background para ajustar a transparência:
| Classe CSS | Descrição |
|---|---|
.bg-opacity-0 | opacidade do background 0% |
.bg-opacity-5% | opacidade do background 5% |
.bg-opacity-10% | opacidade do background 10% |
.bg-opacity-15% | opacidade do background 15% |
.bg-opacity-20% | opacidade do background 20% |
.bg-opacity-25% | opacidade do background 25% |
.bg-opacity-30% | opacidade do background 30% |
.bg-opacity-40% | opacidade do background 40% |
.bg-opacity-50% | opacidade do background 50% |
.bg-opacity-60% | opacidade do background 60% |
.bg-opacity-70% | opacidade do background 70% |
.bg-opacity-75% | opacidade do background 75% |
.bg-opacity-80% | opacidade do background 80% |
.bg-opacity-85% | opacidade do background 85% |
.bg-opacity-90% | opacidade do background 90% |
.bg-opacity-95% | opacidade do background 95% |
<div class="bg-primary bg-opacity-50%"> <!-- conteúdo --> </div>Background size
| Classe CSS | Descrição |
|---|---|
.bg-cover | background-size: cover; |
Background repeat
| Classe CSS | Descrição |
|---|---|
.bg-no-repeat | background-repeat: no-repeat; |
Background position
| Classe CSS | Descrição |
|---|---|
.bg-top | background-position: center top; |
.bg-right | background-position: right center; |
.bg-bottom | background-position: center bottom; |
.bg-left | background-position: left center; |
.bg-top-left | background-position: left top; |
.bg-top-right | background-position: right top; |
.bg-bottom-left | background-position: left bottom; |
.bg-bottom-right | background-position: right bottom; |
Exemplo — adicionar uma imagem de fundo a uma seção:
<div class="bg-cover bg-top" style="background-image: url('/assets/img/photo.jpg');">
<!-- ... -->
</div>Background gradients
Se você adicionou um gradiente à sua paleta (por exemplo, gradient
primary), pode usar as classes abaixo:
| Classe CSS | Descrição |
|---|---|
.bg-gradient-primary | gradiente radial |
.bg-gradient-primary-top-left | gradiente linear para o topo-esquerda |
.bg-gradient-primary-top | gradiente linear para o topo |
.bg-gradient-primary-top-right | gradiente linear para o topo-direita |
.bg-gradient-primary-right | gradiente linear para a direita |
.bg-gradient-primary-bottom-right | gradiente linear para baixo-direita |
.bg-gradient-primary-bottom | gradiente linear para baixo |
.bg-gradient-primary-bottom-left | gradiente linear para baixo-esquerda |
.bg-gradient-primary-left | gradiente linear para a esquerda |
<div class="bg-gradient-primary-bottom">
<!-- ... -->
</div>