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

이 글에서는 주로 CSS를 사용하여 반복 표시를 피하기 위해 배경 이미지를 늘리고 채우는 방법을 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유합니다.

하지만 CSS3가 등장한 이후에는 말이죠. , 이 반복 표시 상황이 개선되었습니다. background-size 속성은 배경 이미지를 늘려서 채우려는 이전의 희망을 실현할 수 있습니다. 관심 있는 친구들은 다음과 같이 참고할 수 있습니다. 배경 이미지를 늘리고 채우는 방법에 대한 질문은 간단해 보입니다. 하지만 말씀드리게 되어 죄송합니다. 우리가 생각하는 것만큼 간단하지 않습니다.
예를 들어 컨테이너(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; 
}

배경 이미지 크기(이미지 자체의 크기로 요소를 채웁니다. is, auto 값):

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

이 글은 여기까지입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:

CSS 여러 줄 텍스트가 오버플로될 때 나타나는 타원에 대해

CSS 스타일의 보다 큼 기호 사용 및 CSS의 상속 방법에 대해

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