CSS - 伪元素 - ::cue

上一步
下一步

CSS 中的 ::cue 伪元素用于设置带有视频文字轨的媒体中的字幕和（WebVTT）提示。

  • 这些属性适用于媒体的所有提示集。

  • 只有 background 及其长结构属性单独适用于每个提示。

下列 CSS 属性仅可在任何选择器上的 ::cue 伪元素中使用

  • background

  • background-attachment

  • background-color

  • background-clip

  • background-image

  • background-origin

  • background-position

  • background-repeat

  • background-size

  • color

  • font

  • font-family

  • font-size

  • font-stretch

  • font-style

  • font-variant

  • font-weight

  • line-height

  • opacity

  • outline

  • outline-color

  • outline-style

  • outline-width

  • ruby-position

  • text-combine-upright

  • text-decoration

  • text-decoration-color

  • text-decoration-line

  • text-decoration-style

  • text-decoration-thickness

  • text-shadow

  • visibility

  • white-space

语法

selector::cue | ::cue(<selector>) {
   /* ... */
}

CSS ::cue 示例

以下是一个展示如何使用 ::cue 伪元素的示例

Open Compiler
<html>
<head>
<style>
    video {
        width: 800px;
    }

    video::cue {
        font-size: 1rem;
        color: peachpuff;
    }
</style>
</head>
<body>
    <video controls src="foo.mp4">
        <track default kind="captions" srclang="en" src="cue-sample.vtt" />
    </video>    
</body>
</html>
打印页面
上一步
下一步
广告