반복되는 display_html5 튜토리얼 기술을 피하기 위해 배경 이미지를 늘리고 CSS를 채우는 방법

배경 이미지를 늘리고 채우는 방법에 대한 질문은 간단해 보입니다. 하지만 말씀드리게 되어 죄송합니다. 우리가 생각하는 것만큼 간단하지 않습니다.
예를 들어 컨테이너(본문, div, 범위)에 배경을 설정합니다. CSS2.1 이전에는 이 배경의 길이와 너비를 수정할 수 없습니다.
그래서 실제 결과는 반복적으로만 표시될 수 있으므로, 반복, 반복-x, 반복-y, 반복 없음 속성이 나타납니다. 배경 이미지 표시를 제어하는 ​​데 사용됩니다. 그래서 배경 이미지는 두 가지 유형이 있습니다 :

1. 전체 크기가 영역 크기와 정확히 일치하는 대형 이미지
2. 매우 작은 막대 이미지, 반복 후 , 매우 규칙적인 대형 그림 배경이 형성됩니다.

그런데 CSS3가 등장하면서 이러한 상황은 개선되었습니다. background-size 속성은 이전 희망 사항을 실현할 수 있습니다.
그리고 이 속성은 Firefox, Chrome, IE9에서 사용할 수 있습니다.

구체적인 사용방법은 다음과 같습니다.
배경 이미지 크기(숫자 표현) :

복사 코드

코드는 다음과 같습니다.

#배경 크기{
배경 크기:200px 100px
}

배경 이미지 크기(백분율로 표시):

코드 복사

코드는 다음과 같습니다.

# background -size2{
background-size:30% 60%
}

배경 이미지 크기(이미지를 비례적으로 확장하여 요소를 채웁니다. , 커버 값):

코드 복사

코드는 다음과 같습니다.

# background-size3{
background-size:cover ;
}

배경 이미지 크기(요소의 크기, 즉 포함 값에 맞게 비례적으로 이미지 축소) :

코드 복사

코드는 다음과 같습니다.

#배경-크기4{
배경 크기:포함;
}

배경 이미지 크기(이미지 자체의 크기로 요소 채우기, 즉 자동 값):

코드 복사

코드는 다음과 같습니다.

#배경-크기5{
배경-크기:auto;
}