CSS 배경 이미지 위치 문제

저자：Eve Cole 업데이트 시간：2009-06-12 17:45:20

다른 분들 작품 발췌~~ 아주 좋은 내용 문법:
배경 위치 : 길이 ||

배경 위치

위치 ||

length : Percent | 부동 소수점 숫자와 단위 식별자로 구성된 길이 값입니다.
위치: 위쪽 | 아래쪽 | 오른쪽

|
객체의 배경 이미지 위치를 설정하거나 검색합니다. background-image 속성을 먼저 지정해야 합니다. 이 속성 위치 지정은 개체의 패딩 설정에 영향을 받지 않습니다.
기본값은 0% 0%입니다. 이때, 배경 이미지는 패딩을 제외한 객체의 콘텐츠 영역 중 좌측 상단에 위치하게 됩니다.
하나의 값만 지정하면 해당 값이 가로좌표에 사용됩니다. 세로좌표는 기본적으로 50%로 설정됩니다. 두 개의 값을 지정하면 두 번째 값이 세로좌표로 사용됩니다.
설정값이 오른쪽 중앙이면 오른쪽 가로좌표 값이 중앙값을 덮어쓰게 되므로 배경 이미지가 오른쪽에 위치하게 됩니다.
해당 스크립트 속성은 backgroundPosition입니다.

background-position -

배경 이미지의

위치 값을 정의합니다

[ <비율> | <길이> | 왼쪽 | 오른쪽 |
* 수준
왼쪽 : 왼쪽
중앙: 중간
오른쪽: 오른쪽
* 수직의
상단: 켜짐
중앙: 중간
하단: 다음
* 수직과 수평의 조합
x-% y-%
x위치 y위치

초기값: 0% 0%
상속: 아니요
적용 대상: 모든 요소
배경: 배경.위치: 위치 ***************************** 설명할 핵심 사항: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml " lang="UTF-8">
<머리>
백그라운드 위치 위치 지정 문제
<스타일 유형="텍스트/css">

<본문>

1.ground-position:left top; (그림 1 참조) 배경 이미지의 왼쪽 상단이 컨테이너(컨테이너)의 왼쪽 상단에 맞춰져 있으며, 초과된 부분은 숨겨집니다. background-position:0,0과 동일하며 background-position:0%,0%;2. background-position:right Bottom과 동일합니다(그림 2 참조). 배경 이미지의 오른쪽 하단 모서리가 컨테이너의 오른쪽 하단 모서리와 정렬되고 초과된 부분은 숨겨집니다. background-position과 동일: 100%, 100%, background-positon과 동일: 컨테이너(컨테이너)의 너비 - 배경 이미지의 너비, 컨테이너(컨테이너)의 높이 - 배경 이미지의 높이 3. 배경 위치: 500px 15px ;(그림 3 참조) 배경 이미지는 컨테이너의 왼쪽 상단에서 오른쪽으로 500px, 아래로 15px 이동되고 초과된 부분은 숨겨집니다. 4.배경 위치:-500px -15px(그림 4 참조) 배경 이미지는 컨테이너의 왼쪽 상단에서 왼쪽으로 500px, 위로 15px 이동되고 초과된 부분은 숨겨집니다. 5.배경 위치:50% 50%(그림 5 참조). 왼쪽과 동일: {컨테이너 너비 - 배경 이미지 너비}*왼쪽 백분율, 초과된 부분은 숨겨집니다. 오른쪽에 해당: {컨테이너(컨테이너) 높이 - 배경 이미지 높이}*오른쪽 백분율, 초과된 부분은 숨겨집니다. 예: background-position:50% 50%; 즉, background-position: (1000-2000)*50%px, (500-30)*50%px; 즉, background-position:-500px, 235px ; 즉, 배경 이미지가 컨테이너의 왼쪽 상단에서 왼쪽으로 500px, 아래쪽으로 235px 이동합니다. 6. (이 경우 배경 이미지는 bg2.jpg 여야 효과를 볼 수 있습니다. bg.jpg 높이 너무 작아서 효과가 명확하지 않음) background-position :-50% -50%(그림 6 참조). 왼쪽과 동일: -{{컨테이너 너비(컨테이너) - 배경 이미지 너비}*왼쪽 백분율(모든 백분율은 양수 값)}, 초과된 부분은 숨겨집니다. 오른쪽과 동일: -{{컨테이너(컨테이너) 높이 - 배경 이미지 높이}*오른쪽 백분율(모든 백분율은 양수 값)}, 초과된 부분은 숨겨집니다. 예: background-position:-50% -50%;는 background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px는 background-position입니다. - 250px,-70px, 즉 배경 이미지가 컨테이너의 왼쪽 상단에서 왼쪽으로 250px 이동하고 위쪽으로 70px 이동합니다.