CSS 배경 요약 소개

모든 배경 속성은 상속될 수 없습니다.

1. background-color

모든 요소에 배경색을 설정할 수 있습니다.

background-color의 기본값은 투명합니다. 즉, 요소가 배경색을 지정하지 않으면 배경이 투명해 상위 요소의 배경이 표시됩니다.

2. 배경 이미지

모든 요소는 배경 이미지를 설정할 수 있습니다.

여러 배경 이미지를 쉼표로 구분하여 설정할 수 있습니다. 이미지는 계단식으로 표시되며 이전 레이어에 작성된 레이어가 맨 위에 표시됩니다.

3. background-repeat

repeat(기본값)/no-repeat/repeat-x/repeat-y

4. background-attachment

스크롤(기본값)/고정

5. background-position

픽셀 방식: 왼쪽 상단부터 시작 이미지의 첫 번째 값은 수평 이동 거리이고, 두 번째 값은 수직 이동 거리입니다. 하나의 값만 지정한 경우 두 번째 값은 기본적으로 50%입니다.

백분율 방식: 이미지와 요소 모두에 백분율을 적용하고 해당 지점을 겹쳐서 위치를 지정합니다. 백분율만 지정하면 세로 방향이 50%라는 의미입니다.

키워드 방식: 상단, 오른쪽, 하단, 왼쪽, 중앙(결합 위치 지정); 하나의 값만 지정한 경우 두 번째 값은 기본적으로 중앙으로 설정됩니다.

참고: background-position은 음수일 수 있습니다.

기본적으로 배경색은 테두리 아래로 확장되고 배경 이미지는 패딩 영역의 왼쪽 상단에 있습니다.

6. background-size

배경 이미지의 크기를 설정합니다. 기본값은 자동입니다.

픽셀 방식: 첫 번째 값은 너비를 설정하고, 두 번째 값은 높이를 설정합니다. 값이 하나만 있는 경우 두 번째 값은 auto입니다.

백분율 방식: 상위 요소의 너비와 높이를 기준으로 계산됩니다.

표지 키워드는 이미지의 가로세로 비율을 변경하지 않고 전체 요소를 가로, 세로로 덮어 이미지의 일부가 넘칠 수 있습니다.

contain 키워드는 이미지의 가로세로 비율을 변경하지 않지만 전체 요소가 한 방향으로 덮일 때까지 이미지를 최대한 늘려서 다른 방향은 덮이지 않을 수 있습니다.

7. background-origin

배경 이미지의 초기 위치

border-box, 테두리의 왼쪽 상단을 정의합니다.

padding-box, 패딩 영역의 왼쪽 위 모서리. 기본값.

콘텐츠 상자, 콘텐츠 영역의 왼쪽 상단.

8. background-clip

CSS3 background-clip 속성은 배경의 페인팅 영역을 지정합니다.

이 속성은 세 가지 다른 속성을 취합니다. 값:

•border-box - (기본값) 배경이 테두리의 바깥쪽 가장자리에 그려집니다

•padding-box - 배경이 패딩의 바깥쪽 가장자리에 그려집니다

•content-box - 배경이 컨텐츠 상자 안에 그려집니다

(영어 설명이 더 명확해졌습니다)

(영어는 모두 W3Schools Online에서 옮겨왔습니다)

background-origin과 background-clip은 서로 독립적이며 서로 간섭하지 않습니다.

배경의 CSS 작성 방법에 관해서는 개인적으로 논리적으로 명확하고 계층적이어야 한다고 생각합니다. 특히:

배경은 배경 이미지를 정의합니다. , background-color는 배경색을 정의하고, background-clip은 배경 표시 영역을 정의합니다.

(개인 의견, 참고용)

배경 이미지 전체

웹사이트에서 브라우저 창 전체를 덮는 배경 이미지를 원하는 경우

요구 사항은 다음과 같습니다.

• 전체 페이지를 이미지로 채웁니다(공백 없음)

• 필요에 따라 이미지 크기 조정

• 페이지 중앙 이미지

• 스크롤바 발생 안 함

다음 예제에서는 html 요소를 사용합니다(html 요소는 항상 브라우저 창의 높이 이상입니다). 그런 다음 고정된 배경을 설정하고 background-size 속성을 사용하여 크기를 조정합니다. >

html {   
     background: url(img_flower.jpg) no-repeat center fixed;    
     background-size: cover;   
 }

팁:

배경 이미지의 수평 타일링을 사용하여 물결 모양 테두리 효과를 얻으세요.

(현재 아이디어만 있고 원하는 이미지를 찾지 못했습니다.)

위 CSS 배경 요약은 편집자가 공유한 모든 내용이기를 바랍니다. 당신에게 참고 자료를 제공하십시오. 또한 모든 사람들이 PHP 중국어 웹 사이트를 지원하기를 바랍니다.

더 많은 CSS 배경 요약 소개 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!