Logo Windi CSS

Фоны

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

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

fixed
local
scroll
CSS
Отсечение фона 
Утилиты для управления рамкой фона элемента.
border
padding
content
CSS
CSS
Фоновый цвет 
Утилиты для управления цветом фона элемента.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Персонализация 
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
 Персонализация 
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
 Персонализация 
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
Размер фона 
Утилиты для управления размером фона фонового изображения элемента.
auto
cover
contain
CSS
 Персонализация 
export default {
  theme: {
    backgroundSize: {
      'auto': 'auto',
      'cover': 'cover',
      'contain': 'contain',
      '50%': '50%',
      '16': '4rem',
    },
  },
}

Область расположения фона 
Утилиты для управления источником фона фонового изображения элемента.
border
padding
content
CSS
Изображение фона 
Утилиты для управления фоновым изображением элемента.
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
 Персонализация 
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
Градиент через 
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Градиент до 
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Режим наложения фона 
Утилиты для управления тем, как фоновое изображение элемента должно сливаться с его цветом фона.
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
CSS