CSS 배경 첨부 속성
예시
페이지와 함께 스크롤되지 않는 배경 이미지(고정):
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성 은 background-attachment
배경 이미지가 페이지의 나머지 부분과 함께 스크롤되는지 또는 고정되는지 여부를 설정합니다.
기본값: | 스크롤 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSS1 |
자바스크립트 구문: | 개체 .style.backgroundAttachment="고정" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 구문
background-attachment: scroll|fixed|local|initial|inherit;
속성 값
Value | Description |
---|---|
scroll | The background image will scroll with the page. This is default |
fixed | The background image will not scroll with the page |
local | The background image will scroll with the element's contents |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
페이지와 함께 스크롤될 배경 이미지(스크롤). 기본값은 다음과 같습니다.
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
예시
간단한 시차 스크롤 효과를 만드는 방법(3D 깊이의 환상 만들기):
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
관련 페이지
CSS 튜토리얼: CSS 배경
HTML DOM 참조: backgroundAttachment 속성