집 > 기사 > 백엔드 개발 > CSS 배경 이미지를 100%로 늘리고 전체 화면 표시를 설정하는 방법

CSS 배경 이미지를 100%로 늘리고 전체 화면 표시를 설정하는 방법

요즘에는 많은 사용자에게 CSS 사용이 매우 중요합니다. 흔적을 남기지 않고 이미지를 아주 잘 늘릴 수 있습니다. 이 글에서는 CSS 배경 이미지를 100% 전체 화면으로 늘리는 방법에 대해 설명합니다. 도움이 필요한 친구가 참조할 수 있습니다.

요즘에는 CSS를 사용하는 것이 많은 사용자에게 매우 중요합니다. 흔적을 남기지 않고 이미지를 아주 잘 늘릴 수 있습니다. 그렇다면 CSS를 사용할 때 배경 이미지가 100%로 늘어나서 전체 화면으로 표시된다면 어떻게 해야 할까요? 구체적인 코드는 무엇입니까?

CSS 배경 이미지를 사용하여 100% 전체 화면 표시로 늘리는 방법은 무엇입니까? 이 질문은 간단하게 들릴 수도 있습니다. 하지만 말씀드리게 되어 죄송합니다. 우리가 생각하는 것만큼 간단하지 않습니다.

예를 들어 컨테이너(body, p,span)에 배경을 설정합니다. CSS2.1 이전에는 이 배경의 길이와 너비 값을 수정할 수 없습니다.

따라서 실제 결과는 반복적으로만 표시할 수 있으므로, 반복, 반복-x, 반복-y, 반복 없음 속성이 나타납니다. 배경 이미지 표시를 제어하는 데 사용됩니다. 따라서 일반적으로 두 가지 유형의 배경 이미지가 있습니다.

1. 해당 지역의 크기와 정확히 일치하는 크기의 대형 사진입니다

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

하지만 CSS3가 등장하면서 이러한 상황은 개선되었습니다. background-size 속성은 이전 희망 사항을 실현할 수 있습니다.

그리고 이 속성은 Firefox, Chrome, ie9에서 사용할 수 있습니다.
구체적인 사용법은 다음과 같습니다.
배경 이미지 크기(숫자 표현):

코드는 다음과 같습니다:

#배경 크기{

배경 크기:200px 100px;

}

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

코드는 다음과 같습니다.

#배경 크기2{

배경 크기:30% 60%;

}

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

코드는 다음과 같습니다

#배경크기3{

배경 크기:표지;

}

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

코드는 다음과 같습니다.

#배경크기

e4{

배경 크기:포함;

}

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

코드는 다음과 같습니다.

#배경크기5{

배경 크기:자동;

}

rreee

관련 기사