CSS의 background-position 속성 사용법 요약

배경 속성은 CSS에서 가장 일반적인 속성 중 하나입니다. CSS 컷아웃을 구현하려면 배경 위치라는 한 가지 속성만 사용하면 됩니다. 배경 위치는 요소의 배경 이미지 위치를 제어하는 ​​데 사용됩니다. 요령은 실제로 요소의 왼쪽 위 모서리를 기준으로 이미지의 왼쪽 위 모서리 위치를 지정하는 것입니다. 세 가지 유형의 값을 허용합니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 및 가운데와 같은 키워드 px, em, rem 등과 같은 길이 값 백분율 값 %. 다음 내용에서는 background-position 속성의 사용법에 대해 설명합니다.

우선 php 중국어 홈페이지 관련 무료 강좌를 배울 수 있습니다

1. "CSS 0 기본 입문 튜토리얼"
에서

CSS Background

챕터 코스를 배워보세요.

2. "Dark Horse Programmer CSS 비디오 튜토리얼"

배경 위치 속성 사용법에서

Background and margin 비디오 코스를 시청하세요.

1 . css background-position 속성

background-position 속성은 배경 이미지의 시작 위치를 설정합니다.

이 속성은 배경 이미지로 정의된 원본 배경 이미지의 위치를 ​​설정합니다. 배경 이미지가 반복되는 경우 이 지점부터 시작됩니다.

팁: Firefox 및 Opera에서 이 속성이 제대로 작동하도록 하려면 background-attachment 속성을 "fixed"로 설정해야 합니다.

2. 배경 위치 백분율 원칙

배경 크기: 100% 자동의 경우 배경 이미지 너비는 요소 너비 * 100%이고 높이는 비례하여 조정됩니다. 자세한 내용은 CSS3 배경을 참조하세요.

배경 위치의 백분율이 상위 요소의 너비를 기준으로 계산된다고 생각하는 것이 당연하지만, 배경 위치는 실제로는 그렇지 않고 자체적인 원칙이 있습니다.

3. CSS에서 배경 위치 사용

두 값 중 첫 번째 값은 가로 위치 지정이며, 이를 X축 위치 지정이라고 합니다. 후자의 값은 세로 위치 지정이며, 이를 y축 위치 지정이라고 합니다. 값이 하나만 있는 경우 기본값은 x축 방향입니다. y축 방향은 기본적으로 위쪽 및 아래쪽 정렬, 즉 중심입니다.

4. Css는 background-position 속성을 사용하여 스프라이트 이미지의 코드를 자세하게 완성합니다

스프라이트 이미지는 CSS Sprite라고도 하는데 CSS 이미지 병합 기술입니다. 여러 개의 작은 아이콘 병합 사진으로 이동한 다음 CSS background-position을 사용하여 표시해야 할 부분을 표시합니다.

웹페이지 이미지 로딩 시 서버에 대한 요청 수를 줄이고, 페이지 로딩 속도를 개선하며, IE6에서 마우스 슬라이드 시 흰색 깜박임 문제를 해결할 수 있습니다.

5. 배경 시리즈: 배경 위치에 대해 모르는 것

배경 위치는 배경 이미지의 오프셋 값을 지정하는 데 사용되며, 이를 통해 특정 위치에서 그림이 표시되기 시작합니다. . CSS Sprites는 여러 개의 작은 이미지를 하나의 큰 이미지로 연결한 다음 background-position을 사용하여 표시해야 하는 영역을 지정함으로써 HTTP 요청 병합에 대한 기대치를 달성합니다.

관련 질문과 답변

1. 배경 위치 이미지 캡처 후 제거할 수 없는 테두리가 있습니다

2.배경 위치 사용에 대한 혼란이 있습니다.

3. 백그라운드 위치 비율에 대해 질문이 있으신가요?

【관련 추천】

1. PHP 중국어 웹사이트의 무료 튜토리얼: "CSS 온라인 매뉴얼"

2. PHP 중국어 웹사이트의 무료 비디오 튜토리얼: "손끝에서 HTML 학습에 대한 비디오 튜토리얼"

3. 중국 웹사이트의 php 무료 비디오 튜토리얼: "php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼"

위 내용은 CSS의 background-position 속성 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!