HTML DOM 스타일 backgroundPosition 속성
스타일 개체 정의 및 사용
backgroundPosition는 속성 집합 또는 배경 이미지 요소의 위치를 반환합니다.
문법
backgroundPosition 속성 설정 :
Object.style.backgroundPosition="position"
위로 backgroundPosition 속성 :
Object.style.backgroundPosition
팁 : 0 % 0 % : 속성의기본 값은 backgroundPosition입니다.
| 值 | 描述 |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
如果仅指定一个关键字，其他值将是 "center"。 |
| x% y% | x 值表示水平位置，y 值表示垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅指定一个值，其他值将是 50%。 |
| xpos ypos | x 值表示水平位置，y 值表示垂直位置。左上角是 0 0。单位可以是像素（0px 0px）或任何其他的 CSS 单位。如果仅指定一个值，其他值将是 50%。您可以混合使用 % 和单位。 |
| inherit | 背景位置属性的设置从父元素继承。 |
브라우저 지원
모든 주요 브라우저는 backgroundPosition 속성을 지원합니다.
참고 : IE7 및 이전 버전은 "상속"값을 지원하지 않습니다.IE8은 "상속"지원!의 DOCTYPE을 제공합니다. IE9 지원 "상속".
예
예
여기에 배경 이미지를 변경합니다
<! DOCTYPE html로>
<HTML>
<헤드>
<메타 문자 집합 = "UTF-8">
<제목>이 튜토리얼 (w3big.com) </ 제목>
<스타일>
사업부 {
배경 이미지 : 홈페이지 ( 'img_tree.png');
배경 - 반복 : 아니오 - 반복;
폭 : 400 픽셀;
높이 : 400 픽셀;
국경 : 1 픽셀 고체 # 000000;
}
</ 스타일>
<스크립트>
displayResult 함수 () {
. = "중앙 하단의"중요 document.getElementById ( "div1") style.backgroundPosition;
}
</ 스크립트>
</ 헤드>
<바디>
<버튼 유형 = "버튼"onclick을 = "displayResult는 ()"> 배경 이미지의 위치를 수정할 수있는 </ 버튼>
로 <br>
<사업부 아이디 = "div1">
</ DIV>
</ BODY>
</ HTML>
<HTML>
<헤드>
<메타 문자 집합 = "UTF-8">
<제목>이 튜토리얼 (w3big.com) </ 제목>
<스타일>
사업부 {
배경 이미지 : 홈페이지 ( 'img_tree.png');
배경 - 반복 : 아니오 - 반복;
폭 : 400 픽셀;
높이 : 400 픽셀;
국경 : 1 픽셀 고체 # 000000;
}
</ 스타일>
<스크립트>
displayResult 함수 () {
. = "중앙 하단의"중요 document.getElementById ( "div1") style.backgroundPosition;
}
</ 스크립트>
</ 헤드>
<바디>
<버튼 유형 = "버튼"onclick을 = "displayResult는 ()"> 배경 이미지의 위치를 수정할 수있는 </ 버튼>
로 <br>
<사업부 아이디 = "div1">
</ DIV>
</ BODY>
</ HTML>
»시도
스타일 개체