배경 이미지 늘리기와 채우기를 구현하는 CSS

우선, 우리는 두 가지 유형의 배경 이미지가 있다는 것을 알고 있습니다.

(권장 학습: css 빠른 시작)

1.

2. 매우 큰 그림이 반복되면 작은 막대형 차트가 매우 규칙적인 큰 그림 배경을 형성합니다.

그렇다면 배경 이미지를 늘리고 채우는 방법은 무엇일까요?

방법은 다음과 같습니다.

배경 이미지 크기(숫자 표현):

코드는 다음과 같습니다.

#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!