Logo Windi CSS

Backdrop Filter

用于控制元素是否启用背景滤镜的工具类。

default
none
CSS
模糊背景(blur) 
default
sm
md
lg
xl
2xl
3xl
0
1
2
3
9
12
24px
2rem
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    backdropBlur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

亮度背景(brightness) 
0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    backdropBrightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

对比度背景(contrast) 
0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    backdropContrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

灰度背景(grayscale) 
default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    backdropGrayscale: {
      50: '0.5',
      80: '0.8',
    },
  },
}

色调背景(huerotate) 
0
15
30
45
60
90
120
180
-120
-90
-60
-45
-30
-15
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    backdropHueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

反转背景(invert) 
default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    backdropInvert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

不透明度背景(opacity) 
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    backdropOpacity: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

饱和度背景(saturate) 
default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    backdropSaturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

棕褐色背景(sepia) 
default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    backdropSepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}