반복 표시를 피하기 위해 배경 이미지를 늘리고 CSS를 채우는 방법

배경 이미지를 늘리고 채우는 방법은 간단해 보입니다. 하지만 말씀드리게 되어 죄송합니다. 우리가 생각하는 것만큼 간단하지 않습니다.
예를 들어 컨테이너(body, p,span)에 배경을 설정합니다. CSS2.1 이전에는 이 배경의 길이와 너비 값을 수정할 수 없습니다.
그래서 실제 결과는 반복적으로만 표시될 수 있으므로, 반복, 반복-x, 반복-y, 반복 없음 속성이 나타납니다. 배경 이미지 표시를 제어하는 ​​데 사용됩니다. 일반적으로 배경 이미지로 사용되는 두 가지 카테고리 가 있습니다.
1. 전체 크기가 해당 영역의 크기와 정확히 일치하는
2. 막대 차트는 반복 후에 매우 규칙적인 큰 그림 배경을 형성합니다.
그런데 css3이 등장하면서 이런 상황은 개선되었습니다. background-size 속성은 이전 희망 사항을 실현할 수 있습니다.
그리고 이 속성은 Firefox, Chrome, IE9에서 사용할 수 있습니다.
구체적인 사용 방법은 다음과 같습니다.
배경 이미지 크기(숫자 표현):

#background-size{ 
background-size:200px 100px; 
} 
　　

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

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

배경 이미지 크기(요소를 채우도록 비례적으로 이미지 확장, 즉 표지 값):

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

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

#background-size4{ 
background-size:contain; 
}

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

#background-size5{ 
background-size:auto; 
}

추가 CSS 반복 표시를 피하기 위해 배경 이미지를 늘리고 채우는 방법 관련 기사는 PHP 중국어 웹사이트를 주목해주세요!