その日、ステーション B でビデオを見ていたとき、字幕が文字に接すると切り取られ、文字が遮られないことを偶然発見しました。すごいと思いました。 、ということで調べてみることにしました。
ハイエンドのエフェクトでは、最も単純な実装方法しか必要としないことがよくあります。2 時間の忙しい作業の後、マスター チェンは F12 をオンにして、突然啓発されました。 1 つの画像と 1 つの属性を直接実行できます。 [学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド ]
私のアイデアを確認するために、自分でデモを書くことにしました。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .video { width: 668px; height: 376px; position: relative; -webkit-mask-image: url("mask.svg"); -webkit-mask-size: 668px 376px; } .bullet { position: absolute; font-size: 20px; } </style> </head> <body> <div> <div style="left: 100px; top: 0;">元芳,你怎么看</div> <div style="left: 200px; top: 20px;">你难道就是传说中的奶灵</div> <div style="left: 300px; top: 40px;">你好,我是胖灵</div> <div style="left: 400px; top: 60px;">这是第一集,还没有舔灵</div> </div> </body> </html>
効果は次のとおりです
mask-image: https://developer.mozilla.org/zh-CN/docs/Web/CSS/ を見てみましょう。マスク画像。
実験的: これは実験的な機能です。この機能は一部のブラウザではまだ開発中であり、ブラウザごとに使用に適したプレフィックスは異なります。 したがって、要件を作成するときにこれをハイライトとして使用できますが、要件を作成する際にこの属性に大きく依存することはできません。 ここには一連の属性もありますので、興味があれば 1 つずつ試してみてください。プログラミング ビデオ をご覧ください。 !

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版
便利なJavaScript開発ツール
