Logo Windi CSS

背景

背景固定

用于控制背景图片在滚动时表现的工具类。

fixed
local
scroll
CSS
背景裁剪 
用于控制元素背景是否裁剪到边框、内边距盒子、内容盒子下的工具类。
border
padding
content
CSS
CSS
背景颜色 
用于控制元素背景色的工具类。
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
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
 Customizing 
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
 Customizing 
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
 Customizing 
export default {
  theme: {
    backgroundSize: {
      'auto': 'auto',
      'cover': 'cover',
      'contain': 'contain',
      '50%': '50%',
      '16': '4rem',
    },
  },
}

背景图像原点 
用于控制元素背景图像原点的工具类。
border
padding
content
CSS