CSS를 사용하여 텍스트를 이미지로 대체/이미지를 다른 이미지로 대체하기

텍스트를 이미지로 바꾸거나 이미지를 다른 이미지로 대체하고 싶은 경우 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이라는 사람이 발견한 세련된 방법이라고 하네요(여기 참고).

jQuery를 사용하여 텍스트를 이미지로 교체하기

jQuery를 사용하여 텍스트를 이미지로 쉽게 교체할 수 있습니다. 예시:

$().ready(function () {
    $('.imageSwitch').each(function () {
        string = $(this).text('MENU');
        $(this).html('<img src="YOUR_IMAGE_LOCATION/NAME.png" alt="' + string + '" />');
    });
});

jQuery보다는 자바스크립트를 사용하는 것이 더 바람직합니다. 자바스크립트를 이용하는 방법에 대해서는 구글링하여 적절한 방법을 선택할 수 있을 것입니다. 예시:

function replace() {
  var el = document.getElementsByClassName('YellowTxt')[0]
  el.innerHTML = '<img src="" alt="image"/>'
}

//출처: https://stackoverflow.com/questions/56361199/replace-text-with-an-image-in-javascript