z-index를 이용한 Image Replacement기법
One Web Developer’s Haven에 소개된 z-index를 이용한 Image Replacement기법이다.(via 覚え書き@kazuhi.to) 이미지 off의 상태에서도, CSS off 상태에서도 텍스트는 잘 표시되지만 역시 span태그가 신경 쓰인다. 그래도 혹시 IR기법을 활용하고자 하시는 분은 참고하시길 바란다.
Top-Level Text
코드는 대략 이런식으로 구성되어 있다. 핵심은 body요소에 z-index:1을 주고(z-index프로퍼티는 position프로퍼티에 “relative”, “absolute”, “fixed” 등 “static” 이외의 값을 가지고 있는 요소에만 적용되는 점에 주의) 적용하고자 하는 요소에 background-image로 이미지를 지정하고 텍스트는 span으로 둘러싼다. span에 z-index:-1을 적용함으로써 텍스트가 background-image의 뒤로 숨게된다(참조 샘플 페이지).
머리속에 background-image는 페이지의 가장 뒤에 있는 요소라는 고정관념이 자리하고 있었는데 이 소스를 보고 깜짝 놀랐다. 역시 어떤일에든 유연한 사고가 필요한 것 같다.
