background - attachment : fixed;
스크롤바 움직여도 그 자리 그대로!!!!!!
<!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>
body {
height: 5000px;
background-image: url(images/apple-bg.jpg);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
a {
display: inline-block;
height: 44px;
width: 46px;
background-image: url(https://www.w3schools.com/css/img_navsprites.gif);
background-repeat: no-repeat;
text-indent: -9999px;
}
.prev {
background-position-x: -47px; width: 43px;
}
.next {
background-position-x: -91px; width: 43px;
}
</style>
</head>
<body>
<div>
<a href="#">Home</a>
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>
</div>
</body>
</html>
'자바 풀스택 공부' 카테고리의 다른 글
| Day 32. Java Script 변수 (0) | 2022.02.17 |
|---|---|
| Day 31. (0) | 2022.02.17 |
| Day 29. text-shadow, white-space 공백 처리하기, margin, text-indent 텍스트 들여쓰기 (0) | 2022.02.12 |
| Day 28. Css 그라데이션 (0) | 2022.02.12 |
| Day 27. (0) | 2022.02.09 |
댓글