반복 표시를 피하기 위해 배경 이미지를 늘리고 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; 
}

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

코드는 다음과 같습니다.

으아아아

위 내용은 반복 표시를 피하기 위해 배경 이미지를 늘리고 CSS를 채우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!