스테이션 B의 포격으로 사람들이 막히는 것을 방지하기 위해 어떤 기술이 사용되는지 알아보세요!-헤드라인-php.cn

스테이션 B의 포격으로 사람들이 막히는 것을 방지하기 위해 어떤 기술이 사용되는지 알아보세요!

青灯夜游

풀어 주다： 2022-11-01 10:17:13

앞으로

2379명이 탐색했습니다.

스테이션 B의 포격으로 사람들이 막히는 것을 방지하기 위해 어떤 기술이 사용되는지 알아보세요!

그날 스테이션 B에서 영상을 보다가 우연히 자막이 등장인물을 만났을 때 자막이 잘려서 등장인물을 가리지 않는다는 걸 발견하고 신기하다고 생각해서 알아보기로 했어요.

고급 효과는 가장 간단한 방법으로만 달성해야 하는 경우가 많습니다. 두 시간 동안 바쁜 작업을 마친 후 Master Chen은 F12를 켜고 갑자기 깨달음을 얻었습니다. 하나의 그림 + 하나의 속성이 직접 수행됩니다. [학습 영상 공유 : css 영상 튜토리얼, 웹 프론트엔드]

스테이션 B의 포격으로 사람들이 막히는 것을 방지하기 위해 어떤 기술이 사용되는지 알아보세요!

제 아이디어를 확인하기 위해 데모를 직접 작성하기로 했습니다

<!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>

로그인 후 복사

효과는 이렇습니다

스테이션 B의 포격으로 사람들이 막히는 것을 방지하기 위해 어떤 기술이 사용되는지 알아보세요!