CSS의 요소 위에 이미지를 넣는 방법

CSS에서는 "z-index" 속성을 사용하여 요소 위에 이미지를 배치할 수 있습니다. 이 속성은 요소의 스택 순서를 설정하는 데 사용됩니다. 여기에 요소가 표시됩니다. 구문은 "그림 요소 {z-index:number;}"입니다.

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

CSS에서 요소 위에 이미지를 배치하는 방법

CSS에서는 위치 지정을 통해 z-index를 사용하여 요소의 계층 관계를 정의할 수 있습니다. 다음 예에서는 CSS의 상단에 이미지를 고정하는 방법을 설명합니다.

1. CSS에서 사진을 고정하는 방법을 설명하기 위해 새 HTML 파일을 만들고 이름을 test.html로 지정합니다. div 태그를 사용하여 모듈을 만들고 img 태그를 사용하여 이미지를 만듭니다. 스타일 정의를 위해 div 및 img 태그에 각각 class 속성을 추가합니다.

Css 태그에서 클래스(mytest)를 통해 div의 스타일을 정의하고 높이와 너비를 400px로 설정하고 배경색을 회색으로 설정하고 z-index를 사용하여 div의 레벨을 0으로 설정합니다.

2 CSS 태그에서 클래스(mypic)를 통해 img 스타일을 정의하고, 이미지의 위치 속성을 위에서 20px, 왼쪽에서 20px로 설정하고 img 레벨을 1로 설정합니다. z-index , 즉 div 위를 통해 그림이 맨 위에 오도록 합니다.

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

요약:

1. div 태그를 사용하여 모듈을 만들고 img 태그를 사용하여 이미지를 만듭니다.

2. 스타일 정의를 위해 div 및 img 태그에 각각 클래스 속성을 추가합니다.

3. CSS 태그에서 클래스(mytest)를 통해 div의 스타일을 정의하고 높이와 너비를 400px로 설정하고 배경색을 회색으로 설정하고 z-index를 사용하여 div의 레벨을 0으로 설정합니다.

4 CSS 태그에서 클래스(mypic)를 통해 img 스타일을 정의하고, 이미지의 위치 속성을 위에서 20픽셀, 왼쪽에서 20픽셀로 설정하고, img 레벨을 1에서 1로 설정합니다. z-index, 즉 div 위에 위치하므로 사진이 맨 위에 고정될 수 있습니다.

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

위 내용은 CSS의 요소 위에 이미지를 넣는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!