네이버에 있는 background 가 궁금해요..
탄성
.ht{position:relative;width:100%;height:35px;background:#3da813 url(http://static.naver.com/m/kin/im/bg.gif) repeat-x 0 -33px;text-align:center;color:#fff}
.nv1{overflow:hidden;width:100%}
.nv1 ul{padding:5px 4px 0 2px;margin-right:-8px;display:block;height:100%;color:#fff}
.nv1 li{overflow:hidden;float:left;height:30px;line-height:28px;margin-right:-2px; background:url(http://static.naver.com/m/kin/im/bg.gif) no-repeat 0 -310px;text-align:center;white-space:nowrap}날이 많이 덥네요.. 헥헥헥... ^^
다름이 아니라 네이버에 보면 위와 같은 css가 있던데요.. 제가 궁금한건 빨간색 부분의 제일 뒤에 있는 숫자들(0 -33px;와0 -310px;)입니다.
이미지의 위치를 나타내는것 같은데 의미를 잘 모르겠네요..
어떤 원리로 움직이는걸까요.. 왼쪽 좌쪽값 0 에서 위에서부터 좌표값이다. 등등.. 이런게 있을듯 한데.. 수치를 바꿔봐도 잘 이해가 안돼서요.. ^^;
-
올해1살
ㅎㅎ
○ 원이미지 하나로 박스의 라운딩 처리를 하는 같은 원리라죠 ㅎㅎ -
각티슈
아.. 그렇군요.. 대충 짐작만 했었는데 정확한 의미를 알고나니 속이 뻥~ 뚫리네요 ^^
고맙습니다. ^^ -
이치코
한장의 이미지에 여러가지 배경을 만들어놓고 background position만 바꿔가며 사용하는 방법입니다.
이미지 load가 한번밖에 이루어지지 않기 때문에 효율적인 방법이라고 알려져 있습니다. -
아란
백그라운드이미지에서 해당되는 위치정보를 불러오는겁니다.
만약 0 -100px이란 위지값을 넣어준다면 이미지를 가로 x축 세로 y축이라고봤을때
x축은 왼쪽으로부터 0px y축은 위쪽부터 100px이 떨어지는 지점에서 시작되는 이미지영역입니다.
그 시작되는 위치부터 width,height값이 지정이 되는것입니다.
설명이 어럽네요...이해하셨길 바랍니다.