Image Replacement(IR기법)

CSS Image Replacement(IR기법)  

의미가 포함되어 있는 image를 배경으로 표현하고, 그에 상응하는 내용을 text로 전경에 기입하는 방법으로,
시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다

 

첫번째

h1#technique-one { width: 250px; height: 25px; background-image: url(logo.gif)}
h1#technique-one span{display: none;}

<h1 id="technique-one">
 <span>CSS-Tricks</span>
</h1> 

 

두번째

h1.technique-two {width: 2350px; height: 75px; background: url("images/header-image.jpg") top right; margin: 0 0 0 -2000px;}

<h1 class="technique-two">
 CSS-Tricks
</h1>

 

세번째

h1.technique-three {width: 350px; height: 75px; background: url("images/header-image.jpg"); text-indent: -9999px;}

 

<h1 class="technique-three">
 CSS-Tricks
</h1>

 

네번째

h1.technique-four {width: 350px; height: 75px; background: url("images/header-image.jpg"); text-indent: -9999px;}

 

<h1 class="technique-four">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>

 

다섯번째

h1.technique-five {width: 350px; height: 75px; background: url("images/header-image.jpg") }

h1.technique-five span {display: none}

 

<h1 class="technique-five">
<img src="images/blank.gif" alt="CSS-Tricks" />
<span>CSS-Tricks</span>
</h1>

 

여섯번째

h1.technique-six {width: 350px; padding: 75px 0 0 0; height: 0;  background: url("images/header-image.jpg")

 no-repeat;  overflow:hidden;}

 

<h1 class="technique-six">
 CSS-Tricks
</h1>

 

일곱번째

h1.technique-seven {width: 350px; height: 75px; background: url("images/header-image.jpg") no-repeat }
h1.technique-seven span {display: block; width: 0;  height: 0;  overflow: hidden}

 

<h1 class="technique-seven">
<span>CSS-Tricks</span>
</h1>

 

여덣번째

h1.technique-eight {width: 350px; height: 75px; position: relative}

h1.technique-eight span {background: url("images/header-image.jpg"); position: absolute; width: 100%; height: 100%}

 

<h1 class="technique-eight">
<span></span>CSS-Tricks
</h1>

 

아홉번째

h1.technique-nine {width: 350px; height: 75px; background: url("images/header-image.jpg") no-repeat; 

font-size: 1px;  color:white}

 

<h1 class="technique-nine">
CSS-Tricks
</h1>

 

 

그밖에

- 텍스트 요소에 z-index 음수 값을 주어 이미지 뒤로 숨기는 방법
- visibility:hidden

[출처] CSS Image Replacement(IR기법)|작성자 heo1515