그날 스테이션 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 -
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
드림위버 CS6
시각적 웹 개발 도구
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
Dreamweaver Mac版
시각적 웹 개발 도구
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
