CSS 페이지 레이아웃(페이지 배경)에 대한 상식 요약

CSS에는 많은 지식이 있으며 우리가 그것을 모두 기억하는 것은 불가능합니다. 여가 시간에 CSS 페이지 레이아웃에 대한 몇 가지 상식을 정리했습니다. 이 기사에서는 CSS 페이지 배경에 대한 상식을 공유할 것입니다. 도움이 필요한 친구들이 참고하면 도움이 될 것 같아요.

1. 배경색 설정

CSS는 페이지의 배경색을 설정하는 background-color 속성을 제공합니다.

예: 배경색: 빨간색;

2. 배경 이미지 설정

페이지에 이미지 추가

구문: ​​

페이지에 배경 이미지 추가

CSS 페이지에 배경 이미지를 직접 추가하려면 background-image 속성을 제공하세요.

구문: ​​background-image: url (pic.jpg);

(1) 배경 이미지 타일링

CSS는 배경 이미지의 타일링 방법을 설정하는 background-repeat 속성을 제공합니다. 네 가지 속성이 있습니다: 반복(배경 이미지가 수평 및 수직으로 타일링됨), 반복 없음(배경 이미지가 수평으로 타일링되지 않음), 반복-x(배경 이미지가 수평으로 타일링됨), 반복-y(배경 이미지가 타일링됨) 수직으로 타일링됨).

Syntax: background-repeat:repeatmode;

(2) 배경 이미지의 위치

CSS는 배경 이미지와 페이지의 상대적 위치를 설정하는 background-position 속성을 제공합니다.

구문: ​​background-position: position;

여기서 위치는 길이 단위, 백분율 및 키워드를 사용하여 결정될 수 있습니다.

사용 길이 단위: background-position: 10px 20px; (배경 이미지는 x축을 따라 10px, y축을 따라 20px로 변환됩니다.)

사용 비율: background-position: 30% 30%; 키워드: 배경- 위치: 오른쪽 하단; 속성 값에는 가로 방향으로 왼쪽, 가운데, 오른쪽이 포함되고, 세로 방향으로 위쪽, 가운데, 아래쪽이 포함됩니다.

(3) 고정 및 스크롤되는 배경 이미지

CSS는 배경 첨부 속성을 제공합니다. 속성 값 스크롤은 배경 이미지가 고정된 개체 콘텐츠로 스크롤됨을 나타내며 배경 이미지가 고정됨을 나타냅니다.

예: 배경 첨부: 고정;

3. 페이지 배경 속성

배경 이미지, 배경 위치, 배경 반복, 배경 첨부의 네 가지 속성은 배경으로 축약될 수 있습니다.

예: 배경: url(pic.jpg) 10px 20px 반복 고정;

위 내용은 CSS 페이지 레이아웃(페이지 배경)에 대한 상식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!