다른 분들 작품 발췌~~ 아주 좋은 내용 문법:
배경 위치 : 길이 ||
:
위치 ||
length : Percent | 부동 소수점 숫자와 단위 식별자로 구성된 길이 값입니다.
위치: 위쪽 | 아래쪽 | 오른쪽
|
객체의 배경 이미지 위치를 설정하거나 검색합니다. background-image 속성을 먼저 지정해야 합니다. 이 속성 위치 지정은 개체의 패딩 설정에 영향을 받지 않습니다.
기본값은 0% 0%입니다. 이때, 배경 이미지는 패딩을 제외한 객체의 콘텐츠 영역 중 좌측 상단에 위치하게 됩니다.
하나의 값만 지정하면 해당 값이 가로좌표에 사용됩니다. 세로좌표는 기본적으로 50%로 설정됩니다. 두 개의 값을 지정하면 두 번째 값이 세로좌표로 사용됩니다.
설정값이 오른쪽 중앙이면 오른쪽 가로좌표 값이 중앙값을 덮어쓰게 되므로 배경 이미지가 오른쪽에 위치하게 됩니다.
해당 스크립트 속성은 backgroundPosition입니다.
배경 이미지의
위치 값을 정의합니다
.
[ <비율> | <길이> | 왼쪽 | 오른쪽 |
* 수준
왼쪽 : 왼쪽
중앙: 중간
오른쪽: 오른쪽
* 수직의
상단: 켜짐
중앙: 중간
하단: 다음
* 수직과 수평의 조합
x-% y-%
x위치 y위치
초기값: 0% 0%
상속: 아니요
적용 대상: 모든 요소
배경: 배경.위치: 위치 ***************************** 설명할 핵심 사항: <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 전환//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<머리>
<title>백그라운드 위치 위치 지정 문제</title>
<스타일 유형="텍스트/css">
<!--
*{
여백:0;
패딩:0;
}
몸 {
텍스트 정렬:가운데;
배경:#000;
}
#컨테이너{
너비:1000px;
여백:0 자동;
배경:#fff url(images/bg.jpg) 반복 없음 왼쪽 상단;
높이:500px;
}
-->
</style>
</head>
<본문>
<div id="컨테이너"> </div>
</body>
</html>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 이동합니다.