CSS를 사용하여 HTML 텍스트를 이미지로 어떻게 바꿀 수 있습니까?

CSS를 사용하여 HTML 텍스트를 이미지로 바꾸기

HTML에서는 태그를 사용하여 제목을 만들고 웹 내에서 텍스트를 표시하는 것이 일반적입니다. 페이지. 그러나 텍스트를 이미지로 바꾸고 싶은 경우가 있습니다. 이 기사에서는 텍스트를 숨기고 대신 이미지를 표시하는 두 가지 효과적인 CSS 솔루션을 탐색하여 이 문제를 해결합니다.

솔루션 1: 화면 밖으로 텍스트 푸시

이 방법에는 들여쓰기가 포함됩니다. 텍스트가 화면에서 상당히 떨어져 있어 사용자가 효과적으로 볼 수 없게 됩니다. 동시에 태그에 배경 이미지가 적용되어 원하는 이미지가 표시됩니다.

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

해결책 2: 텍스트가 넘치도록 숨기기

이 접근 방식은 다음의 조합을 사용합니다. 텍스트 들여쓰기, 공백 제어 및 텍스트를 숨기기 위한 오버플로.

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

둘 중 하나를 구현하여 이러한 솔루션 중 HTML 태그 내의 텍스트를 효과적으로 숨기고 대신 원하는 이미지를 표시할 수 있습니다.

위 내용은 CSS를 사용하여 HTML 텍스트를 이미지로 어떻게 바꿀 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!