background

英[ˈbækgraʊnd] 美[ˈbækˌɡraʊnd]

n.(그림 등) 배경색; 배경 정보; ˈzʃn ] 美[ pəˈzˈʃən]

n. 위치, 위치, 상태

vt. 배치... 적절한 위치에...; 복수: position 현재분사: positioning 과거시제: position 과거분사: position

CSS 배경 위치 속성 통사론

배경 위치 속성을 어떻게 사용하나요?

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

기능: 배경 이미지의 시작 위치를 설정합니다.

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

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

설정할 수 있는 값:

단 하나의 키워드만 지정하는 경우 두 번째 값은 "center"가 됩니다. x% y% 첫 번째 값은 가로 위치이고 두 번째 값은 세로 위치입니다. xpos ypos 첫 번째 값은 가로 위치이고 두 번째 값은 세로 위치입니다.

CSS 배경 위치 속성 예

<html>
<head>
<style type="text/css">
body
{ 
  background-image:url('http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
  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>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

설명

top center

top right

center left

center center

center right

왼쪽 하단

하단 중앙

오른쪽 하단

기본값: 0% 0%.

왼쪽 상단이 0% 0% 입니다. 오른쪽 하단은 100% 100%입니다.

하나의 값만 지정하면 다른 값은 50%가 됩니다.


왼쪽 상단이 0 0 입니다. 단위는 픽셀(0px 0px) 또는 기타 CSS 단위입니다.

하나의 값만 지정하면 다른 값은 50%가 됩니다.

%와 위치 값을 혼합할 수 있습니다.