HTML5에서 배경 그림의 위치에 따라 객체의 위치를 ​​설정하는 방법은 무엇입니까?

Question

나는 HTML5에 관한 프로젝트를 가지고있다. 배경 이미지 축구 필드입니다. 축구 선수의 이름 (레이블 또는 버튼)은 끝났습니다. 배경 이미지의 위치에 따라 이러한 오브젝트의 위치 (픽셀 또는 기타)를 설정하는 방법은 무엇입니까?

가장 좋은 방법은 테이블을 사용하는 것입니까?

Answer 1

위치 CSS 속성 (http://www.w3schools.com/css/css_positioning.asp, http://www.barelyfitz.com/screencast/html-training/css/positioning/)을 사용할 수 있습니다. 당신이해야 할 일은 배경 위에 컨테이너의 상대적 위치를 설정하고 그 위에있는 요소에 대해 적절한 오프셋을 사용하여 절대 위치를 설정하는 것입니다.

아니요, 테이블이 최선의 방법은 아닙니다. 구역을 사용하거나 대신 div을 사용하십시오.

Answer 2

백그라운드 포지셔닝을 살펴보십시오. HTML5 Canvas에서 작동합니다.

background-position: right-pixels-or-percentage top-pixels-or-percentage; 

http://www.w3schools.com/css/css_background.asp