배경 속성은 CSS에서 가장 일반적인 속성 중 하나입니다. CSS 컷아웃을 구현하려면 배경 위치라는 한 가지 속성만 사용하면 됩니다. 배경 위치는 요소의 배경 이미지 위치를 제어하는 데 사용됩니다. 요령은 실제로 요소의 왼쪽 위 모서리를 기준으로 이미지의 왼쪽 위 모서리 위치를 지정하는 것입니다. 세 가지 유형의 값을 허용합니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 및 가운데와 같은 키워드 px, em, rem 등과 같은 길이 값 백분율 값 %. 다음 내용에서는 background-position 속성의 사용법에 대해 설명합니다.
우선 php 중국어 홈페이지 관련 무료 강좌를 배울 수 있습니다
1. "CSS 0 기본 입문 튜토리얼"
에서
챕터 코스를 배워보세요. 
2. "Dark Horse Programmer CSS 비디오 튜토리얼"
Background and margin 비디오 코스를 시청하세요.
1 . css background-position 속성
background-position 속성은 배경 이미지의 시작 위치를 설정합니다.
이 속성은 배경 이미지로 정의된 원본 배경 이미지의 위치를 설정합니다. 배경 이미지가 반복되는 경우 이 지점부터 시작됩니다.
팁: Firefox 및 Opera에서 이 속성이 제대로 작동하도록 하려면 background-attachment 속성을 "fixed"로 설정해야 합니다.
2. 배경 위치 백분율 원칙
배경 크기: 100% 자동의 경우 배경 이미지 너비는 요소 너비 * 100%이고 높이는 비례하여 조정됩니다. 자세한 내용은 CSS3 배경을 참조하세요.
배경 위치의 백분율이 상위 요소의 너비를 기준으로 계산된다고 생각하는 것이 당연하지만, 배경 위치는 실제로는 그렇지 않고 자체적인 원칙이 있습니다.
두 값 중 첫 번째 값은 가로 위치 지정이며, 이를 X축 위치 지정이라고 합니다. 후자의 값은 세로 위치 지정이며, 이를 y축 위치 지정이라고 합니다. 값이 하나만 있는 경우 기본값은 x축 방향입니다. y축 방향은 기본적으로 위쪽 및 아래쪽 정렬, 즉 중심입니다.
4. Css는 background-position 속성을 사용하여 스프라이트 이미지의 코드를 자세하게 완성합니다
스프라이트 이미지는 CSS Sprite라고도 하는데 CSS 이미지 병합 기술입니다. 여러 개의 작은 아이콘 병합 사진으로 이동한 다음 CSS background-position을 사용하여 표시해야 할 부분을 표시합니다.
웹페이지 이미지 로딩 시 서버에 대한 요청 수를 줄이고, 페이지 로딩 속도를 개선하며, IE6에서 마우스 슬라이드 시 흰색 깜박임 문제를 해결할 수 있습니다.
배경 위치는 배경 이미지의 오프셋 값을 지정하는 데 사용되며, 이를 통해 특정 위치에서 그림이 표시되기 시작합니다. . CSS Sprites는 여러 개의 작은 이미지를 하나의 큰 이미지로 연결한 다음 background-position을 사용하여 표시해야 하는 영역을 지정함으로써 HTTP 요청 병합에 대한 기대치를 달성합니다.
관련 질문과 답변
1. 배경 위치 이미지 캡처 후 제거할 수 없는 테두리가 있습니다
【관련 추천】
1. PHP 중국어 웹사이트의 무료 튜토리얼: "CSS 온라인 매뉴얼"
2. PHP 중국어 웹사이트의 무료 비디오 튜토리얼: "손끝에서 HTML 학습에 대한 비디오 튜토리얼"
3. 중국 웹사이트의 php 무료 비디오 튜토리얼: "php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼"
위 내용은 CSS의 background-position 속성 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
