::cue
::cue
CSS伪元素匹配WebVTT插入所选择的元素中的线索。这可以用于设置VTT轨道媒体中的字幕和其他线索。
只有一小部分CSS属性可以与::cue
伪元素一起使用:
color
opacity
visibility
text-decoration
其手写属性:text-decoration-line
,text-decoration-color
,和text-decoration-style
text-shadow
background
其手写属性:background-color
,background-clip
,background-image
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
,和background-blend-mode
outline
其手写属性:outline-color
,outline-style
,outline-width
font
和它的普通写法属性: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
,和font-family
line-height
white-space
text-combine-upright
ruby-position
这些属性应用于整个cues集,就好像它们是一个单元一样。唯一的例外是background
它的速记属性可以单独应用于每个提示,以避免创建盒子并且意外地遮蔽媒体的大部分区域。
语法
::cue | ::cue( <selector> )
例
下面的CSS设置提示样式,以便文本是白色的,背景是半透明的黑匣子。
::cue {
color: #fff;
background-color: rgba(0, 0, 0, 0.6
}
规范
Specification | Status | Comment |
---|---|---|
WebVTT: The Web Video Text Tracks Format | Draft | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | (Yes) | ? | 551 | No | ? | ? |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | ? | ? | ? | 55 | No | ? | ? |