광고처럼 소리 없지 자동재생하게끔 하기!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bg {
position: fixed;
left: 0;
top: 0;
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
z-index: -100;
background: url(media/flame.jpg) left top no-repeat;
background-size: cover;
}
#container {
position: relative;
text-align: center;
margin-top: 30%;
margin-left: 30%;
}
.myclass {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<video controls autoplay muted loop id="bg">
<source src="media/flame.mp4">
</video>
<div class="myclass">
<div id="container">
<h2>사람을 구체적으로 도와주는 책</h2>
<h1>이지스퍼블리싱</h1>
</div>
</div>
</body>
</html>'자바 풀스택 공부' 카테고리의 다른 글
| Day 33. Java Script 데이터 타입 (0) | 2022.02.21 |
|---|---|
| Day 32. Java Script 변수 (0) | 2022.02.17 |
| Day 30. (0) | 2022.02.14 |
| Day 29. text-shadow, white-space 공백 처리하기, margin, text-indent 텍스트 들여쓰기 (0) | 2022.02.12 |
| Day 28. Css 그라데이션 (0) | 2022.02.12 |
댓글