텍스트를 그림으로 대체/그림을 다른 그림으로 대체하는 CSS

그림을 다른 그림으로 대체하기(이미지를 다른 이미지로 교체)

HTML 예:

<div id='#Image'></div>

CSS 예:

#Image {
width:100px;
height:100px;
background:url("image.png") no-repeat;
}

조금 더 정교한 방법으로 다음과 같은 코드를 시도해볼 수 있습니다(출처: css-tricks).

.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://www.abc.com/newbanner.png) no-repeat;
width: 180px; /* 새 이미지의 폭 */
height: 236px; /* 새 이미지의 높이 */
padding-left: 180px; /* 새 이미지의 폭과 동일하게 */
}

텍스트를 그림으로 대체하기

HTML 예:

<h1 class="hide-text show-image">숨길 텍스트</h1>

CSS 예:

.show-image {
width: 40px;
height: 40px;
background: url(../images/my-title-image.png);
}

.hide-text {
text-indent: 100%; /* 창 밖으로 이동시킴 */
white-space: nowrap; /* 다시 돌아오지 않도록 함 */
overflow: hidden;

이 방법은 Zeldman이라는 사람이 발견한 세련된 방법이라고 하네요(여기 참고).

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.