首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

::cue

::cue

::cueCSS伪元素匹配WebVTT插入所选择的元素中的线索。这可以用于设置VTT轨道媒体中的字幕和其他线索

只有一小部分CSS属性可以与::cue伪元素一起使用:

  • color
  • opacity
  • visibility
  • text-decoration其手写属性:text-decoration-linetext-decoration-color,和text-decoration-style
  • text-shadow
  • background其手写属性:background-colorbackground-clipbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizebackground-attachment,和background-blend-mode
  • outline其手写属性:outline-coloroutline-styleoutline-width
  • font和它的普通写法属性:font-kerningfont-stylefont-variantfont-variant-numericfont-variant-positionfont-variant-east-asianfont-variant-capsfont-variant-alternatesfont-variant-ligaturesfont-synthesisfont-feature-settingsfont-language-overridefont-weightfont-sizefont-size-adjustfont-stretch,和font-family
  • line-height
  • white-space
  • text-combine-upright
  • ruby-position

这些属性应用于整个cues集,就好像它们是一个单元一样。唯一的例外是background它的速记属性可以单独应用于每个提示,以避免创建盒子并且意外地遮蔽媒体的大部分区域。

语法

代码语言:javascript
复制
::cue | ::cue( <selector> )

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

代码语言:javascript
复制
::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

?

?

扫码关注腾讯云开发者

领取腾讯云代金券