CSS를 사용하여 왼쪽 상단에 이미지를 표시하는 방법

방법: 1. "요소 {배경-이미지:url(그림 요소);}" 문을 사용하여 이미지를 요소의 배경 이미지로 설정합니다. 2. "요소 {배경-위치:왼쪽 상단; }" 문을 사용하여 배경 이미지를 배치하려면 오른쪽 상단에 배경 이미지를 표시하면 됩니다.

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

css를 사용하여 왼쪽 상단에 이미지를 표시하는 방법

1. CSS+div를 사용하여 배경 이미지 div가 왼쪽 상단에 표시되는 방법을 설명하기 위해 test.html이라는 새 html 파일을 만듭니다. 모서리. 테스트를 위해 div를 사용하여 모듈을 만듭니다. div 태그에 class 속성을 추가하고 mybg로 설정합니다.

2 CSS 태그에서 클래스를 통해 div의 스타일을 설정하고 너비를 300px, 높이를 300px, 테두리를 1px로 정의합니다. 그런 다음 background-image 속성을 통해 배경 이미지를 1.png로 설정하고, background-repeat를 통해 배경 이미지가 타일링되지 않도록 설정하고, background-position 속성을 "left top"으로 설정하여 왼쪽 상단의 배경 이미지를 제어합니다. 모서리.

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

요약:

1. div를 사용하여 모듈을 만들고 div 태그에 클래스 속성을 추가합니다.

2. CSS 태그에서 클래스를 통해 div의 스타일을 설정하고 너비를 300px, 높이를 300px, 테두리를 1px로 정의합니다.

3 CSS 태그에서 background-image 속성을 통해 배경 이미지를 1.png로 설정하고, background-repeat를 통해 배경 이미지가 타일링되지 않도록 설정하고, background-position 속성을 "left top"으로 설정합니다. 배경 이미지의 왼쪽 상단 위치를 제어합니다.

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

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