CSS 위치 지정 이미지의 변경되지 않은 위치를 얻는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 위치 지정 이미지의 변경되지 않은 위치를 얻는 방법

藏色散人

Dec 15, 2020 am 10:29 AM

css

CSS 위치 지정 이미지를 변경하지 않고 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 배경 배경 이미지를 도입하고 마지막으로 이미지 위치를 수정하고 변경하지 않도록 이미지에 "위치: 고정" 스타일을 추가합니다.

CSS 위치 지정 이미지의 변경되지 않은 위치를 얻는 방법

이 튜토리얼의 운영 환경: windows7 시스템, css3 버전, thinkpad t480 컴퓨터.

추천: "css 비디오 튜토리얼"

css에서는 고정 위치 지정(위치: 고정)을 사용하여 이미지 위치를 변경하지 않고 유지하여 텍스트를 드래그해도 이미지 위치가 변경되지 않도록 할 수 있습니다. .

위치: 고정은 브라우저 창을 기준으로 위치가 고정된 요소를 생성하는 데 사용됩니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

fixed는 고정 위치 요소를 생성합니다. 요소는 문서 흐름에서 분리되어 문서 흐름의 위치를 차지하지 않으며 문서 흐름 위에 떠 있고 브라우저 창을 기준으로 배치되는 것으로 이해될 수 있습니다.

고정 위치 지정(위치: 고정): 요소는 브라우저 창을 기준으로 위치가 지정됩니다. 슬라이더를 어떻게 움직여도 해당 요소는 브라우저 창을 기준으로 고정된 위치에 고정됩니다. 존재 여부에 관계없이 위치를 지정합니다. 이때 사용되는 위쪽, 아래쪽, 왼쪽, 오른쪽도 브라우저 창을 기준으로 합니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.logo {
width: 540px;
height: 258px;
position: fixed;
background: url(https://www.baidu.com/img/bdlogo.png) no-repeat;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="logo"> </div>
111<br/> 111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
</body>
</html>

Rendering:

CSS 위치 지정 이미지의 변경되지 않은 위치를 얻는 방법