CSS에서 이미지 위치를 조정하는 방법-CSS 튜토리얼-php.cn

CSS에서 이미지 위치를 조정하는 방법

藏色散人

풀어 주다： 2023-01-04 09:37:27

원래의

25522명이 탐색했습니다.

CSS에서 이미지 위치를 조정하는 방법: 1. 위치 속성을 사용하여 "" 태그에 의해 소개된 이미지의 위치를 제어합니다. 2. "배경 위치" 속성을 사용하여 이미지의 시작 위치를 설정합니다. 배경 이미지.

CSS에서 이미지 위치를 조정하는 방법

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

CSS로 이미지 위치를 제어하는 방법에 대한 자세한 설명을 살펴보겠습니다.

1. position 속성을 사용하여 이미지의 위치를 제어합니다

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>css控制图片位置</title>
</head>
<body>
<div style="width:500px;height:400px;border:1px solid red;position:relative;">
<img  src="img/4.jpg"   style="max-width:90%"/ alt="CSS에서 이미지 위치를 조정하는 방법" >
</div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다

CSS에서 이미지 위치를 조정하는 방법

위치 속성은 요소의 위치 지정 유형을 지정합니다.

이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.

속성 값:

absolute는 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정되는 절대 위치 지정 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

fixed는 브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

relative 일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.

정적 기본값. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다.

inherit는 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

2. background-position 속성은 배경 이미지의 시작 위치를 설정합니다.

<html>
<head>
<style type="text/css">
body
{ 
  background-image:url(&#39;/i/eg_bg_03.gif&#39;);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>
</head>
<body>
<body>
<p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，
才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS에서 이미지 위치를 조정하는 방법