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

집

웹 프론트엔드

CSS 튜토리얼

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

藏色散人

Dec 15, 2020 am 10:40 AM

css

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="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"     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에서 이미지 위치를 조정하는 방법

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

이 속성은 배경 이미지로 정의된 원본 배경 이미지의 위치를 설정합니다. 배경 이미지가 반복되는 경우 이 지점부터 시작됩니다.

팁: Firefox 및 Opera에서 이 속성이 제대로 작동하도록 하려면 background-attachment 속성을 "fixed"로 설정해야 합니다.

핫 AI 도구

뜨거운 도구

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.