CSS3의 배경 이미지 위치의 배경 위치 사용법 소개

이 글은 CSS3의 배경 위치 사용법을 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

CSS3가 배경 위치를 설정하기 전에 요소의 왼쪽 상단에서 위치를 설정할 수 있습니다.

예:

div{background-position:20px 40px;/*20px from left & 20px from top*/}

문제는 정확한 위치를 다른 지점에서 결정할 수 없다는 것입니다. 예를 들어 하단/오른쪽에서는 왼쪽 상단에서만 시작할 수 있습니다.

다음과 같이 쓸 수 있습니다: background-position: right Bottom; 다음과 같이 쓸 수도 있습니다: background position: 70%/start from left/80%/start from top/;,

하지만 오른쪽에서 20px, 오른쪽에서 20px를 쓸 수는 없습니다. 바닥.

새로운 배경 위치 속성

을 살펴보겠습니다. 이 문제를 해결하기 위해 CSS3에서는 위치 지정을 시작할 위치와 0,0 지점을 결정할 수 있는 옵션을 제공합니다.

어떻게 달성할 수 있나요?

이제 2개의 값(왼쪽 상단의 가로 및 세로 지점)을 작성하는 대신 오른쪽 하단 값 + 시작점과 같이 css3를 사용하여 가로 및 세로 위치의 시작 부분을 작성할 수 있습니다. ).

예제를 만들어 보겠습니다.

먼저 몇 가지 스타일을 사용하여 빈 div를 만듭니다.

HTML:

<div class="box">
</div>

CSS

.box{   
  width:300px;
  height:300px;
  background-color:#ddd;
  padding:10px;
  border:solid 3px #333;
  border-radius:10px;
}

이제 고정된 배경 크기 배경 이미지를 추가합니다(CSS3의 새로운 기능).

.box{   
    background:url(image/cup.jpg) no-repeat;
    background-size:150px 150px;
}

마지막으로 새로운 배경 위치를 추가하겠습니다.

먼저 수평 시작점을 설정합니다(예: 오른쪽). 그 다음에는 원하는 거리(예: 20px)를 설정할 수 있습니다.
둘째, 수직 시작점(예: 하단)을 설정한 다음 해당 위치에서 필요한 거리(예: 40픽셀)를 설정합니다.

CSS 새로운 배경 위치

.box{ background-position :right 20px bottom 40px;}

효과는 다음과 같습니다:

이 효과를 달성했습니다. 또한, 여러 배경 이미지가 포함된 상자를 구현할 수도 있습니다.

	
	


<div class="box">
</div>   

The 효과는 다음과 같습니다:

위 내용은 CSS3의 배경 이미지 위치의 배경 위치 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!