首页
学习
活动
专区
圈层
工具
发布

::cue

::cue

::cueCSS伪元素匹配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它的速记属性可以单独应用于每个提示,以避免创建盒子并且意外地遮蔽媒体的大部分区域。

语法

代码语言:javascript
代码运行次数:0
复制
::cue | ::cue( <selector> )

例

下面的CSS设置提示样式,以便文本是白色的,背景是半透明的黑匣子。

代码语言:javascript
代码运行次数:0
复制
::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

?

?

扫码关注腾讯云开发者

领取腾讯云代金券