CSS 배경 위치 속성을 사용하는 방법-프런트엔드 Q&A-php.cn

CSS 배경 위치 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-05-30 09:21:21

원래의

4148명이 탐색했습니다.

background-position 속성은 배경 이미지의 시작 위치를 설정하는 데 사용됩니다. 구문은 배경 위치: x y입니다. 여기서 x는 수평 위치를 나타내고 y는 수직 위치를 나타냅니다. 예를 들어 왼쪽 위, 3% 2%, xpos ypos와 같이 x와 y에 값을 할당하는 방법이 있습니다.

CSS 배경 위치 속성을 사용하는 방법

CSS 배경 위치 속성을 사용하는 방법은 무엇입니까?

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

구문: 

background-position: x y

로그인 후 복사

설정할 수 있는 값:

Value	Description
왼쪽 상단 왼쪽 가운데 왼쪽 하단 오른쪽 상단 오른쪽 중앙 오른쪽 하단 center top center center center Bottom	키워드 하나만 지정하면 나머지 값은 "center"
x% y%	첫 번째 값은 가로 위치, 두 번째 값은 수직. 왼쪽 상단은 0% 0%입니다. 오른쪽 하단은 100% 100%입니다. 하나의 값만 지정하면 나머지 값은 50%가 됩니다. . 기본값은 0% 0%
xpos ypos	첫 번째 값은 가로 위치이고 두 번째 값은 세로 위치입니다. 왼쪽 위 모서리는 0입니다. 단위는 픽셀(0px0px) 또는 기타 CSS 단위일 수 있습니다. 하나의 값만 지정하면 나머지 값은 50%가 됩니다. %와 위치를 혼합할 수 있습니다.

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

참고: 이 속성이 Firefox 및 Opera에서 제대로 작동하도록 하려면 배경 첨부 속성을 "고정"으로 설정해야 합니다.

css 배경 위치 속성 예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style type="text/css">
body
{ 
  background-image:url(&#39;https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg&#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 배경 위치 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!