Logo Windi CSS

Фоны

Фиксированный фон

Утилиты для управления поведением фонового изображения при прокрутке.

fixed
local
scroll
CSS
.bg-fixed {
  background-attachment: fixed;
}

Отсечение фона

Утилиты для управления рамкой фона элемента.

border
padding
content
CSS
.bg-clip-border {
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
CSS
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

Фоновый цвет

Утилиты для управления цветом фона элемента.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
}
Персонализация
windi.config.js
export default {
  theme: {
    backgroundColor: theme => ({
      ...theme('colors'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

Прозрачность фона

Утилиты для управления непрозрачностью цвета фона элемента.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      opacity: {
        light: '0.15',
      },
    },
  },
}

Положение фона

Утилиты для управления положением фонового изображения элемента.

bottom
center
left
left-bottom
left-top
right
right-bottom
right-top
top
CSS
.bg-bottom {
  background-position: bottom;
}
Персонализация
windi.config.js
export default {
  theme: {
    backgroundPosition: {
      'bottom': 'bottom',
      'bottom-4': 'center bottom 1rem',
      'center': 'center',
      'left': 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      'right': 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      'top': 'top',
      'top-4': 'center top 1rem',
    },
  },
}

Повтор фона

Утилиты для управления повторением фонового изображения элемента.

repeat
no-repeat
repeat-x
repeat-y
repeat-round
repeat-space
CSS
.bg-repeat {
  background-repeat: repeat;
}

Размер фона

Утилиты для управления размером фона фонового изображения элемента.

auto
cover
contain
CSS
.bg-auto {
  background-size: auto;
}
Персонализация 
export default {
  theme: {
    backgroundSize: {
      'auto': 'auto',
      'cover': 'cover',
      'contain': 'contain',
      '50%': '50%',
      '16': '4rem',
    },
  },
}

Область расположения фона

Утилиты для управления источником фона фонового изображения элемента.

border
padding
content
CSS
.bg-origin-border {
  background-origin: border-box;
}

Изображение фона

Утилиты для управления фоновым изображением элемента.

none
gradient-to-t
gradient-to-tr
gradient-to-r
gradient-to-br
gradient-to-b
gradient-to-bl
gradient-to-l
gradient-to-tl
CSS
.bg-gradient-to-r {
  background-image: -o-linear-gradient(left, var(--tw-gradient-stops));
  background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      backgroundImage: theme => ({
        'hero-pattern': 'url(\'/img/hero-pattern.svg\')',
        'footer-texture': 'url(\'/img/footer-texture.png\')',
      }),
    },
  },
}

Градиент фона

Утилиты для управления градиентами фона.

Градиент от

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.from-green-500 {
  --tw-gradient-from: rgba(16, 185, 129, var(--tw-from-opacity, 1));
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

Градиент через

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.via-gray-500 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(107, 114, 128, var(--tw-via-opacity, 1)), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

Градиент до

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.to-yellow-500 {
  --tw-gradient-to: rgba(245, 158, 11, var(--tw-to-opacity, 1));
}

Режим наложения фона

Утилиты для управления тем, как фоновое изображение элемента должно сливаться с его цветом фона.

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
CSS
.bg-blend-normal {
  background-blend-mode: normal;
}