CSS에서 배경 이미지를 완전히 표시하는 방법

CSS에서는 "배경 크기" 속성을 사용하여 배경 이미지를 완전히 표시할 수 있습니다. 이 속성은 배경 이미지의 크기를 지정하는 데 사용됩니다. "배경 크기:100% 100%"만 추가하면 됩니다. ;" 스타일을 요소에 추가합니다. 배경 이미지가 완전히 표시됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css에서 배경 이미지를 완전히 표시하는 방법

div+css를 사용하여 웹 페이지를 만들 때 div에 배경 이미지 전체를 표시해야 하는 경우가 있습니다. 그럼 CSS 설정은 어떻게 사용하나요? 다음 예에서는 div+css가 배경 이미지의 전체 표시를 제어하는 ​​방법을 설명합니다.

1 div+css가 배경 이미지의 전체 표시를 제어하는 ​​방법을 설명하기 위해 test.html이라는 새 html 파일을 만듭니다. 배경 이미지를 추가하려면 div 태그를 사용하여 모듈을 만듭니다. div 태그의 class 속성을 mydiv로 설정하는데, 이는 아래 이 클래스를 통해 CSS 스타일을 설정할 때 주로 사용됩니다. 태그를 작성하면 이 태그에 페이지의 CSS 스타일이 작성됩니다.

클래스 이름 mydiv를 통해 div의 CSS 스타일을 설정하고, width 속성을 사용하여 div의 너비를 300px로 설정하고, height 속성을 사용하여 div의 높이를 300px로 설정합니다.

2 CSS 태그에서 background-image 속성을 통해 div의 배경 이미지를 이미지 폴더 아래의 1.jpg 이미지로 설정하고, background-size를 사용하여 너비와 높이 비율을 설정합니다. 배경 이미지를 100%로 설정하면 전체 배경 이미지가 표시됩니다.

브라우저에서 test.html 파일을 열어서 효과를 확인해 보세요.

요약:

1.test.html 파일을 만듭니다.

2. 파일 내에 div 모듈을 만듭니다.

3. CSS 태그에서 div의 너비, 높이, 배경 이미지를 설정한 후 background-size 속성을 통해 배경 너비와 높이를 100%로 설정하면 전체 배경 이미지가 표시됩니다.

참고:

div의 너비 비율이 이미지의 너비 및 높이 비율과 다른 경우 배경 이미지 설정이 완전히 표시되므로 변형이 발생합니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS에서 배경 이미지를 완전히 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!