CSS의 배경 속성의 특징 소개

이 글은 CSS의 배경 속성에 대한 소개를 제공합니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

약어순서: color-image-repeat-attachment-position

eg:body{Background:#ffffff url('img.png') no-repeat right top}

각 속성의 특징을 순서대로 소개하겠습니다 :

1. 배경색: 빨간색; #ffffff; rgb (255,255,255);

3가지 색상 표현 방법, 즉 색상 이름, 16진수 및 RGB가 모든 요소에 대해 설정될 수 있습니다.

2. background-image: url ('img.jpg')

이미지 주소는 상대 경로 또는 절대 경로일 수 있습니다. 기본값은 타일링되고 반복 표시됩니다.

3. ; 반복 없음;

기본 타일 반복 표시

4. background-attachment: 고정;

배경 첨부는 배경 이미지가 고정되는지 여부를 의미합니다. 페이지 스크롤; 기본 스크롤

스크롤은 페이지의 나머지 부분과 함께 스크롤되는 것을 의미합니다. 상속은 상위 요소에서 상속됨을 의미합니다.

5. 배경 위치: 하단 중앙, 66% 33%; 50px 100px;

4개 표현: 하나는 위쪽, 왼쪽, 아래쪽, 중앙 조합이며 시스템은 기본값입니다. ; 세 번째는 백분율이고, 네 번째는 픽셀을 직접 쓰는 것입니다.

후자의 두 가지는 정확도가 높습니다.

6. background-clip: border-box; 콘텐츠 상자는 배경 이미지의 그리기 영역을 지정합니다.

7. background-origin: border-box; 콘텐츠 상자는 배경 이미지의 위치를 ​​지정합니다.

참고: 배경 이미지 배경 첨부가 "고정"된 경우 이 속성은 효과가 없습니다.

8. background-size: auto(기본값); 길이(두 개의 값, 하나의 너비와 하나의 높이. 값이 하나인 경우 기본적으로 두 번째 값은 자동임)(할당 원칙은 길이와 동일) ; 커버(이때 이미지의 가로 세로 비율이 유지되고 배경 위치 지정 영역을 완전히 덮을 수 있는 가장 작은 크기로 이미지 크기가 조정됩니다.) 포함(이 때 이미지의 가로 세로 비율을 유지하고 크기 조절) 배경 위치 지정 영역에 맞는 가장 작은 크기로 이미지를 만듭니다.)

관련 권장 사항:

CSS: background color/Background image_html/css_WEB-ITnose

CSS 배경 — 전체 설명 CSS 배경 속성

위 내용은 CSS의 배경 속성의 특징 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!