CSS 위치 지정 이미지의 변경되지 않은 위치를 얻는 방법
- 藏色散人원래의
- 2020-12-15 10:29:253289검색
CSS 위치 지정 이미지를 변경하지 않고 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 배경 배경 이미지를 도입하고 마지막으로 이미지 위치를 수정하고 변경하지 않도록 이미지에 "위치: 고정" 스타일을 추가합니다.
이 튜토리얼의 운영 환경: 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:
설명:
위의 예에서 position:fixed를 사용하여 그림의 위치를 고정할 수 있으므로 드래그해도 그림의 위치가 바뀌지 않습니다. 텍스트의 위치입니다.
위 내용은 CSS 위치 지정 이미지의 변경되지 않은 위치를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!