backgroundAttachment 속성은 배경 이미지가 페이지 내용과 관련하여 스크롤되어야 하는지 여부를 설정하거나 가져오는 데 사용됩니다.
구문
다음은 −
의 구문입니다.backgroundAttachment 속성 설정 -
object.style.backgroundAttachment = "scroll|fixed|local|initial|inherit"
값
다음은 값입니다 -
| Sr.No | 값 및 설명 |
|---|---|
| 1 | 스크롤 이것은 기본값이며 이미지와 함께 배경을 스크롤합니다. |
| 2 | 고정 이렇게 하면 뷰포트와 관련된 배경이 수정됩니다. |
| 3 | 로컬 요소의 내용과 함께 배경을 스크롤합니다. |
| 4 | 초기 이 속성을 초기 값으로 설정합니다. |
| 5 | 상속 상위 속성 값을 상속합니다. |
예시
backgroundAttachment 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/artificial_intelligence_with_python/images/artificialintelligence-with-python-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
}
article {
color: white;
background: rgba(0, 0, 0, 0.4);
}
</style>
<script>
function changeAttachment(){
document.getElementById("BODY1").style.backgroundAttachment="local";
document.getElementById("Sample").innerHTML="The background will now scroll along with the page.";
}
</script>
</head>
<body id="BODY1">
<h2>This is demo heading</h2>
<p>Curabitur tincidunt elit libero, sed ullamcorper urna ullamcorper ut.
Nulla scelerisque, quam in efficitur porta, nisi turpis blandit odio, vitae ultricies lectus ex vel felis.
Proin lectus nulla, cursus vitae massa ac, mollis gravida orci. Cras euismod imperdiet elit, aliquet placerat purus bibendum vel.
Nullam vehicula urna non ullamcorper congue. Etiam volutpat gravida tempus. Fusce non volutpat diam.
Nullam sagittis condimentum dui, a pharetra mi commodo nec. Cras vulputate hendrerit ornare.
Sed id ligula sit amet arcu dapibus molestie nec at risus.
Aliquam gravida, dolor non vehicula lobortis, augue erat gravida metus, id eleifend ante risus vel turpis.
Nunc fermentum scelerisque nulla, non gravida dui consequat malesuada. Pellentesque mollis scelerisque quam ac efficitur.
Nunc ante velit, efficitur vitae dignissim semper, maximus in mi.</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<p> Vivamus eget nisi eu libero viverra vestibulum. Nulla luctus ultrices metus, nec dapibus magna dignissim eget. Ut sed posuere erat.</p>
<p>Nunc ante velit, efficitur vitae dignissim semper, maximus in mi.</p>
<p>Pellentesque vitae est eget est tempus pretium.
Phasellus semper erat efficitur justo tristique sollicitudin.
Morbi mi eros, aliquet ac gravida ac, tempor et ante. </p>
<p>Aenean non justo non lorem accumsan fermentum efficitur at quam.
Morbi rhoncus lacus sed est luctus, a hendrerit est ullamcorper.
Etiam quis nisl non sem fringilla ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Donec ac malesuada turpis. Donec dapibus diam metus, nec blandit tellus vulputate quis.</p>
<p>Donec blandit tincidunt ante, sed blandit massa volutpat eu. Mauris ac porta lectus, et vulputate ante.</p>
<p>Click the below button to change the above div backface visibility value</p>
<button onclick="changeAttachment()">CHANGE ATTACHMENT</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
첨부 파일 변경 버튼을 클릭하면 이미지가 상단에 고정되고 하단에 표시되지 않습니다 -
