不透明度

用于控制应用程序中元素不透明度的实用程序。

TIP

此特性在 v3.6.0 (Nebula) 版本引入。

类	代表值
opacity-0	opacity: 0;
opacity-10	opacity: .1;
opacity-20	opacity: .2;
opacity-30	opacity: .3;
opacity-40	opacity: .4;
opacity-50	opacity: .5;
opacity-60	opacity: .6;
opacity-70	opacity: .7;
opacity-80	opacity: .8;
opacity-90	opacity: .9;
opacity-100	opacity: 1;
opacity-hover	opacity: var(--v-hover-opacity);
opacity-focus	opacity: var(--v-focus-opacity);
opacity-selected	opacity: var(--v-selected-opacity);
opacity-activated	opacity: var(--v-activated-opacity);
opacity-pressed	opacity: var(--v-pressed-opacity);
opacity-dragged	opacity: var(--v-dragged-opacity);

使用

opacity（不透明度） 实用程序允许您快速更改任何元素的不透明度。

悬停 (Hover)

使用v-hover 组件，当元素悬停在上面时，有条件地应用不透明度类。

SASS variables

你也可以使用下面的 SASS 变量来自定义不透明度颜色和宽度:

@use 'vuetify/settings' with (
  $opacities: (
    hover: var(--v-hover-opacity),
    focus: var(--v-focus-opacity),
    selected: var(--v-selected-opacity),
    activated: var(--v-activated-opacity),
    pressed: var(--v-pressed-opacity),
    dragged: var(--v-dragged-opacity),
    0: 0,
    10: .1,
    20: .2,
    30: .3,
    40: .4,
    50: .5,
    60: .6,
    70: .7,
    80: .8,
    90: .9,
    100: 1
  )
);

通过将$ opacity 变量设置为false来禁用不透明度类的生成。

@use 'vuetify/settings' with (
  $opacities: false
);