::cue
版本:CSS3
CSS伪类::cue
元素匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。
网络视频文本轨道,简称为 WebVTT,是一种用于标记文本轨道的文件格式。它与 HTML5 <track>
元素相结合,可给音频/视频等媒体资源添加字幕,标题和其他描述信息,并同步显示。给媒体文件添加文本信息,是为了让媒体面向更多的人群,使其容易访问。如有听觉障碍的人,或者更普遍地说,不熟悉这门语言的观众。WebVTT 文件是一个以 UTF-8 为编码,以.vtt 为文件扩展名的简单文本文件。
语法:
E ::cue{sRules}
只有CSS一小部分属性可以与::cue
伪元素一起使用:
color
opacity
visibility
text-decoration
:text-decoration-line
,text-decoration-color
,andtext-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
属性应用于整个提示集,就像它们是单个单元一样。唯一的例外是背景及其简写属性可以单独应用于每个提示,以避免创建框并遮盖意外大面积的媒体。
浏览器支持
![]() | ![]() | ![]() | ![]() | ![]() |
IE、火狐浏览器不支持::cue 。其余浏览器支持。 |
例子
以下CSS设置提示样式,使文本为白色,背景为半透明黑盒。
::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6); }