CSS 복수이미지사용 z축 순서(css3)

CSS 복수이미지사용 z축 순서

복수이미지사용으로 재미있는 점은 그림의 위치가 겹칠경우이다. 개별에 z-index를 줄수는없지만 순서는 지정해준 순서대로다 img01,img02,img03이렇게 해주면 img01이 맨앞에 온다.예제를 보자

내용

div{ 
width:500px; height:450px; border:1px solid #fcc;
background-image:
url("./images/love01.gif"),
url("./images/love02.gif"),
url("./images/love03.gif");

background-repeat : 
no-repeat,no-repeat, no-repeat;

background-position:	
20px 20px,
100px 70px,
130px 180px;
}

물론 요약해서 "background" 으로도 한번에 지정하기가 가능하다

div{ background:
url("./images/love01.gif") no-repeat 20px 20px,
url("./images/love02.gif") no-repeat 100px 70px,
url("./images/love03.gif") no-repeat 130px 180px;
}

결과는 여기서 보자링크

여전히 복수이미지는 아직 webkit을 기반으로 하는 구글크롬, 사파리에서만 적용된다.