CSS의 background-attachment 속성은 뷰포트를 기준으로 페이지를 스크롤할 때 배경 이미지의 위치를 지정하는 데 사용됩니다. 스크롤, 고정 및 로컬 값을 가질 수 있습니다.
구문
CSS background-attachment 속성의 구문은 다음과 같습니다 -
Selector {
background-attachment: /*value*/
} 예시
다음 예는 CSS background-attachment 속성을 보여줍니다 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-repeat: no-repeat;
background-attachment: local;
background-position: center;
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg");
}
div {
padding: 40px;
margin: 30px;
}
.in {
background: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div id="one">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다 -
스크롤하면 다음과 같은 결과가 나타납니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 5%;
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg");
}
div {
padding: 80px;
margin: 30px;
border-radius: 4%;
}
.in {
background: rgba(0,40,0,0.4);
}
</style>
</head>
<body>
<div id="one">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다 -
스크롤하면 다음과 같은 결과가 나타납니다 -
