::cue (:cue)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
::cue CSS 伪元素匹配所选元素中的WebVTT提示。这可以用于在 VTT 轨道的媒体中使用字幕和其他线索。
只有 CSS 一小部分属性可以与 ::cue
伪元素一起使用:
color
opacity
visibility
text-decoration
and its longhand properties:text-decoration-line
,text-decoration-color
, andtext-decoration-style
text-shadow
background
and its longhand properties:background-color
,background-clip
,background-image
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
, andbackground-blend-mode
outline
and its longhand properties:outline-color
,outline-style
,outline-width
font
and its longhand properties:font-kerning
,font-style
,font-variant
,font-variant-numeric
,font-variant-position
,font-variant-east-asian
,font-variant-caps
,font-variant-alternates
,font-variant-ligatures
,font-synthesis
,font-feature-settings
,font-language-override
,font-weight
,font-size
,font-size-adjust
,font-stretch
, andfont-family
line-height
white-space
text-combine-upright
ruby-position
属性应用于整个提示集,就像它们是单个单元一样。唯一的例外是背景及其简写属性可以单独应用于每个提示,以避免创建框并遮盖意外大面积的媒体。
语法
css
::cue | ::cue(<selector>) {
/* ... */
}
示例
以下 CSS 设置提示样式,使文本为白色,背景为半透明黑盒。
css
::cue {
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
}
规范
Specification |
---|
WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |
浏览器兼容性
BCD tables only load in the browser