CSS의 배경 태그에 대한 가장 포괄적인 요약

우리는 CSS 개발에서 배경을 자주 사용합니다. 이 글에서는 주로 CSS 배경에 대한 요약을 제공합니다. 편집자께서 꽤 좋다고 생각하셔서 지금 공유하고 참고용으로 드리도록 하겠습니다. 모두에게 도움이 되었으면 좋겠습니다.

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

1. 배경색

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

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

2. background-image

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

여러 배경 이미지를 쉼표로 구분하여 설정할 수 있으며, 배경 이미지는 이전 레이어가 위에 기록됩니다.

3. background-repeat

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

4. background-attachment

scroll(기본값)/fixed

5. 방법: 이미지의 왼쪽 상단을 시작점으로 하여 첫 번째 값은 수평 이동 거리, 두 번째 값은 수직 이동 거리입니다. 한 가지 값만 지정한 경우 두 번째 값은 기본적으로 50%입니다.

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

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

참고: 배경 위치는 음수일 수 있습니다.

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

6. background-size

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

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

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

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

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

7. background-origin

배경 이미지의 초기 위치를 정의합니다

border-box, 테두리의 왼쪽 상단.

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

content-box, 콘텐츠 영역의 왼쪽 상단 모서리.

8. background-clip

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

이 속성은 세 가지 다른 값을 사용합니다.

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

•padding-box - 배경이 패딩 바깥쪽 가장자리에 칠해짐

•content-box - 배경이 콘텐츠 상자 안에 그려짐

(영어 설명이 더 명확함)

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

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

CSS 배경 작성 방법은 개인적으로 논리적이고 계층적이어야 한다고 생각합니다. 구체적으로는

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

(개인 의견, 참고용)

전체 크기 배경 이미지

웹사이트에서 항상 브라우저 창 전체를 덮는 배경 이미지를 갖고 싶다면

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

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

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

• 페이지 중앙에 이미지

• 스크롤 막대를 표시하지 마세요

다음 예에서는 html 요소를 사용하는 방법을 보여줍니다. html 요소는 항상 브라우저 창의 높이 이상입니다. 그런 다음 배경 크기 속성을 사용하여 크기를 조정합니다.

CSS 코드는 클립보드에 콘텐츠를 복사합니다.

html 사용           out out out through off 's               off ‐ ‐ ‐ ‐ , ​
1. 팁:
   배경 이미지의 수평 타일링을 사용하여 물결 모양 테두리 효과를 얻으세요.
2. (현재 아이디어만 있는데 아직 마음에 드는 이미지를 찾지 못했습니다.)
   관련 추천 :

3. css background-attachment 속성 기본 소개

4. 5가지 CSS 사용 방법 공통 레이아웃을 구현하기 위한 테이블

CSS3 배경 크기 속성에 대한 자세한 소개

위 내용은 CSS의 배경 태그에 대한 가장 포괄적인 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!