CSS에서 이미지 위치를 조정하는 방법
- 藏色散人원래의
- 2020-12-15 10:40:2125526검색
CSS에서 이미지 위치를 조정하는 방법: 1. 위치 속성을 사용하여 "
" 태그에 의해 소개된 이미지의 위치를 제어합니다. 2. "배경 위치" 속성을 사용하여 이미지의 시작 위치를 설정합니다. 배경 이미지.
이 튜토리얼의 운영 환경: 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>
효과는 다음과 같습니다
위치 속성은 요소의 위치 지정 유형을 지정합니다.
이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.
속성 값:
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('/i/eg_bg_03.gif');
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>효과는 다음과 같습니다.
background-position 속성은 배경 이미지의 시작 위치를 설정합니다.
이 속성은 배경 이미지로 정의된 원본 배경 이미지의 위치를 설정합니다. 배경 이미지가 반복되는 경우 이 지점부터 시작됩니다.
팁: Firefox 및 Opera에서 이 속성이 제대로 작동하도록 하려면 background-attachment 속성을 "fixed"로 설정해야 합니다.
추천: "css 비디오 튜토리얼"
위 내용은 CSS에서 이미지 위치를 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!