스테이션 B의 포격으로 사람들이 막히는 것을 방지하기 위해 어떤 기술이 사용되는지 알아보세요!
- 青灯夜游앞으로
- 2022-11-01 10:17:132310검색
그날 스테이션 B에서 영상을 보다가 우연히 자막이 등장인물을 만났을 때 자막이 잘려서 등장인물을 가리지 않는다는 걸 발견하고 신기하다고 생각해서 알아보기로 했어요.
고급 효과는 가장 간단한 방법으로만 달성해야 하는 경우가 많습니다. 두 시간 동안 바쁜 작업을 마친 후 Master Chen은 F12를 켜고 갑자기 깨달음을 얻었습니다. 하나의 그림 + 하나의 속성이 직접 수행됩니다. [학습 영상 공유 : css 영상 튜토리얼, 웹 프론트엔드]
제 아이디어를 확인하기 위해 데모를 직접 작성하기로 했습니다
<!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>효과는 이렇습니다
빨간색 배경을 하나 추가하면 더 선명하게 보입니다.
이 시점에서 우리는 캐릭터를 차단하지 않고 Bilibili의 동일한 공세를 구현했습니다.
이 사진의 출처는 AI가 인식하고 생성한 사진이겠죠. 한 장의 비용은 한두 K 정도이고, 한 번에 여러 장의 사진을 로딩해도 큰 부담은 되지 않습니다.
마지막으로 이 마법의 CSS 속성인 mask-image을 살펴보겠습니다. https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image.
실험적: 이 기능은 일부 브라우저에서 아직 개발 중이며, 브라우저마다 사용하기에 적합한 접두사가 다릅니다.
따라서 요구 사항을 개발할 때 강조 표시로 사용할 수 있지만 요구 사항을 만들 때 이 속성에 크게 의존할 수는 없습니다.
여기에는 일련의 속성도 있습니다. 관심이 있으시면 하나씩 시도해 볼 수 있습니다.
- END -
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !