다른 웹사이트의 스타일을 연구하다 보면, 웹페이지의 다양한 부분의 사용을 만족시키기 위해 동일한 이미지가 많은 배경 속성에 사용되는 상황을 종종 발견합니다. 이런 종류의 사진을 열어서 살펴보면 이 사진에 다음과 같은 작은 사진이 많이 포함되어 있음을 알 수 있습니다.
또 다른 예:
이 작은 그림들은 전체 그림을 나눈 후의 부분입니다. 각 부분은 별도의 그림으로 저장되지 않고 하나의 그림에 배치됩니다. 그 목적은 http 요청 수를 줄이고 시간과 대역폭을 절약하는 것입니다 .
그러면 그림의 일부만 다른 위치에 표시된다는 것을 어떻게 알 수 있습니까? 이것은 오늘 이야기할 배경 그림의 위치 지정 문제를 사용하는 것입니다. 많은 사람들이 이 문제로 인해 우울해하고 있고, 친구들도 자주 물어보는 것 같아서 오늘은 체계적으로 설명하겠습니다.
이미지를 배경으로 사용할 때 CSS는 이렇게 작성해야 한다고 알고 있습니다. div 컨테이너를 . 예를 들어 body일 수도 있고, td, p 등의 배경도 동일합니다.
코드: div{ background: #FFF url(image) no-repeatfixed xy;} |
여기서 배경 속성 값은 다음과 같습니다.
#FFF 배경 색상: (색상 값, 배경 이미지가 가려지지 않은 곳, 또는 있는 경우 배경 이미지 배경색이 없습니다)
이미지 배경 사진: (여기에 사진의 주소가 있습니다)
반복 없음을 반복할지 여부: (그림이 컨테이너 크기보다 작은 경우 기본적으로 그림은 컨테이너를 채우기 위해 반복적으로 배열됩니다. 반복 없음은 반복이 없음을 의미합니다. 이 때에만 후속 위치 좌표가 지정됩니다. 유용한.)
고정 배경이 컨테이너와 함께 스크롤되는지 여부: (두 가지 선택적 값인 스크롤 스크롤이 있으며 고정은 스크롤하지 않으며 기본값은 스크롤입니다)
xy 배경 이미지 위치 지정: (위치 지정은 반복 없음에서만 의미가 있습니다. 이것이 오늘의 초점입니다.)
배경 이미지 위치 지정에서 몇 가지 사항을 명확히 해야 합니다.
1. 두 값 중 첫 번째 값 수평 위치 지정, 우리는 이를 x축 위치 지정이라고 부릅니다. 후자의 값은 세로 위치 지정이며, 이를 y축 위치 지정이라고 합니다. 값이 하나만 있는 경우 기본값은 x축 방향이며, 이때 y축 방향은 기본적으로 상하 정렬, 즉 중심이 됩니다.
2. 좌표축의 원점은 해당 컨테이너의 왼쪽 정점 입니다.
3. 이 좌표의 y축 화살표는 아래를 향하고 있습니다. 즉, 오른쪽 하단(컨테이너 내부)의 xy 값은 모두 양수입니다.
4. xy 값은 각각 좌표 원점(즉, 컨테이너의 왼쪽 꼭지점)을 기준으로 배경 이미지의 왼쪽 꼭지점 값을 나타냅니다.
5. xy 값은 백분율이나 px로 표시할 수 있습니다.
6. xy는 "왼쪽, 오른쪽, 위쪽, 아래쪽, 가운데"의 5가지 정렬 방법으로 표현할 수도 있지만, 참고: "왼쪽, 오른쪽, 위쪽, 아래쪽, 가운데"로 표현하면 정렬 규칙이 적용되는 것이 아니라 오히려 좌표 규칙보다 . x가 왼쪽이면 그림의 왼쪽이 컨테이너의 왼쪽에 정렬된다는 의미이고, 오른쪽이면 y가 위쪽에 있을 때 그림의 오른쪽이 컨테이너의 오른쪽에 정렬된다는 의미입니다. , 이는 그림의 위쪽이 컨테이너의 위쪽에 정렬됨을 의미합니다. xy가 중앙과 같을 때 그림의 위쪽이 컨테이너의 아래쪽에 정렬된다는 의미입니다. 중앙 정렬을 의미합니다.
7. xy를 백분율이나 px로 표현하는 경우 그 값은 음수가 될 수 있습니다. 좌표 규칙을 적용하면 음수의 의미를 쉽게 이해할 수 있습니다. x가 음수인 경우 그림의 왼쪽 꼭지점이 컨테이너의 왼쪽 꼭지점보다 왼쪽에 있다는 의미입니다. 이는 그림의 왼쪽 정점이 컨테이너의 왼쪽 고정점 위에 있다는 의미입니다. 즉, 컨테이너의 범위를 벗어나는 왼쪽과 위쪽입니다.
아래에서는 여러 가지 상황을 설명하기 위해 몇 가지 그림을 사용합니다 . 파란색 블록은 그림을 나타내고 점선 상자는 컨테이너(div, td 또는 직접 본문일 수 있음)를 나타냅니다. . 흰색을 사용하여 보이는 부분을 나타내고, 컨테이너 범위를 벗어나는 부분은 회색을 사용하여 나타냅니다. 컨테이너의 왼쪽 고정점 좌표는 (0, 0)입니다.
첫 번째, 배경 이미지는 콘텐츠의 왼쪽 상단에 정렬됩니다. 0px 0px도 왼쪽 상단으로 쓸 수 있습니다.
두 번째 그림에서는 배경 이미지가 컨테이너 중앙에 있고 고정점 좌표는 양수 값입니다.
세 번째 사진은 배경 이미지가 컨테이너 왼쪽 상단에 있고, 고정점 좌표가 음수
------------ --------- --------------
이 시점에서 배경 이미지의 위치를 정확하게 지정하기 위해 배경에서 위치 지정 값을 사용하는 방법을 이해할 수 있습니다. 다시 돌아가 처음에 소개된 두 이미지(배경 위치 지정 및 컨테이너 내에서만 표시)를 살펴보겠습니다. . 전체 그림의 특정 부분을 마음대로 호출하는 속성입니다.
그러나 호출의 편의를 위해 이러한 작은 그림을 배열할 때 몇 가지 규칙에 주의해야 합니다. 예를 들어 작은 그림 사이의 거리는 일반적으로 작은 그림이 호출되는 컨테이너의 크기이거나 거리가 더 큽니다. 컨테이너에 표시되는 것을 방지하기 위해 우리가 보여주고 싶지 않은 사진을 보여주세요!
또한 위치 지정에서 백분율을 사용하는 경우 알고리즘은 다소 특별합니다. 예를 들어 보겠습니다.
코드: background:#FFF url(image) no-repeatfixed 50% -30%; |
이때 이미지는 컨테이너의 어디에 있어야 합니까? 알고리즘 공식은 다음과 같습니다
. 컨테이너의 왼쪽 정점부터 이미지의 왼쪽 정점까지
x: (컨테이너 너비 - 이미지 너비) x50%
y: (컨테이너 높이 - 이미지 높이) x (-30%)
얻은 결과는 좌표 규칙을 적용합니다. 차이가 음수이고 백분율이 양수이면 연산 결과는 음수입니다. 차이가 음수이고 백분율이 음수이면 결과는 양수입니다. 전체적으로 여기에서의 작업은 알고리즘을 따릅니다. 연산의 결과를 좌표규칙으로 가져오면 그림의 위치를 알 수 있다.
예: 컨테이너는 너비: 600px; 높이: 600px이고 그림은 너비: 200px;
위 스타일을 사용하면 다음과 같이 이미지 위치를 얻을 수 있습니다.
x: (600px-200px)*50%
y: (600px-200px)*(-30%)
아래와 같이:
