> 웹 프론트엔드 > CSS 튜토리얼 > CSS를 사용하여 HTML 텍스트를 이미지로 어떻게 바꿀 수 있습니까?

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

Susan Sarandon
풀어 주다: 2024-12-03 01:27:11
원래의
625명이 탐색했습니다.

How Can I Replace HTML Text with an Image Using CSS?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿