에펙 효과 > 팁

본문 바로가기
  • 메뉴 준비 중입니다.

사이트 내 전체검색

뒤로가기

에펙 효과

페이지 정보

작성자 비타주리 작성일 22-06-23 19:57 조회 2,758 댓글 0

본문

<style>
.effect-div { width:100%; background-size:cover; overflow:hidden; position:relative; }
.effect-div video { width:100%; mix-blend-mode:screen; }
.effect-div div { font-size:3rem; font-weight:bold; width:100%; height:100%; position:absolute; top:0px; left:0px; display:flex; justify-content:center; align-items:center; }
</style>

<img style=width:100% src=https://blog.kakaocdn.net/dn/dJ6gOn/btrFzv7SLNZ/pVg2FsYKQjehvvHUc9yHVk/img.jpg>
<div class=effect-div style="background-image:url('https://blog.kakaocdn.net/dn/dJ6gOn/btrFzv7SLNZ/pVg2FsYKQjehvvHUc9yHVk/img.jpg')">
    <video src="https://blog.kakaocdn.net/dn/cpBAY5/btrFvVLsBIf/aG5rrBOJN1dhUYm28N9b4K/tfile.mp4"  autoplay loop muted></video>
    <div><a style=color:#ffffff>회사 소개</a></div>
</div>

<img style=width:100%;margin-top:20px src=https://blog.kakaocdn.net/dn/bfEOWy/btrFybIPqlI/vQ6bDkAzcp19CtZHGkjs31/img.jpg>
<div class=effect-div style="background-image:url('https://blog.kakaocdn.net/dn/bfEOWy/btrFybIPqlI/vQ6bDkAzcp19CtZHGkjs31/img.jpg')">
    <video src="https://blog.kakaocdn.net/dn/cpBAY5/btrFvVLsBIf/aG5rrBOJN1dhUYm28N9b4K/tfile.mp4"  autoplay loop muted></video>
    <div><a style=color:#0000ff>회사 연혁</a></div>
</div>

<script>
onresize = function() {
    for (effect_div of document.getElementsByClassName("effect-div")) effect_div.style.height = effect_div.offsetWidth * 9 / 16 + "px";

}
onresize();
</script>

댓글목록 0

등록된 댓글이 없습니다.

Copyright © 소유하신 도메인. All rights reserved.

사이트 정보

회사명 : 회사명 / 대표 : 대표자명
주소 : OO도 OO시 OO구 OO동 123-45
사업자 등록번호 : 123-45-67890
전화 : 02-123-4567 팩스 : 02-123-4568
통신판매업신고번호 : 제 OO구 - 123호
개인정보관리책임자 : 정보책임자명

PC 버전으로 보기