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 偽元素用法的示例

<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>
廣告

© . All rights reserved.