비디오 html/css에 png 마스크 적용

MP4 파일에 PNG 마스크를 적용하는 데 문제가 있습니다. 잘 모르겠습니다.비디오 html/css에 png 마스크 적용

#wee { 
    mask-image: url(dosebotdesigns.com/test4.png); 
}

이 JSFiddle를 확인 자유롭게의 HTML은

<html> 
<body> 
    <video id="wee" autoplay src="dosebotdesigns.com/smoke.mp4"> 
</body> 
</html>

처럼 이동과 CSS를 읽 https://jsfiddle.net/tyd8wggr/

내 주요 목표는 PNG가 마스크 것입니다 비디오를 연기하십시오. 시간 내 줘서 고마워!

출처

2017-02-05 dosebot

공급 업체 접두사를 사용하십시오. https://jsfiddle.net/tyd8wggr/1/ – sdgluck

이 태그는 실험용이며 많은 브라우저에서 작동하지 않습니다 (its compatibility matrix 참조). 즉, 간단하게 -webkit-mask-image: url(http://dosebotdesigns.com/test4.png);을 기존 CSS에 추가하여 Chrome 55ish에서 나에게 잘 맞았습니다.

편집 (음, 표시에서, 당신은 이미지와 비디오 사이의 비율 차이를 설명하기 위해 약간의 비틀기가 필요합니다 "잘 작동") : 나는 당신이 찾고있는 생각 this과 같은 것입니다.

출처

2017-02-05 21:24:02

예! 내가 가고있는 실제 효과는 http://kemuri-tatsuya.com/의 스플래시 페이지입니다. (나는 연기 MP4 : P를 가져갔습니다) – dosebot

div에 2 개의 항목을 넣을 것을 생각하고있었습니다. 나는 이미지의 경계를 100 % 만들려고했지만, 분명 CSS에있는 것이 아니다. 어쩌면 검정색 배경이있는 "공사 중"이미지 옆에 2 개의 div를 넣을 수 있습니까? – dosebot

Chrome에서 작동하려면이 코드가 -webkit-mask-image이어야하지만 특정 브라우저에서만 작동합니다.

출처

2017-02-05 21:28:53 TheContrarian

비디오 html/css에 png 마스크 적용

답변

관련 문제