CSS를 사용하여 이미지를 표시하는 동안 텍스트를 효과적으로 숨기는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 이미지를 표시하는 동안 텍스트를 효과적으로 숨기는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-19 19:20:02

원래의

998명이 탐색했습니다.

How to Effectively Hide Text While Displaying an Image Using CSS?

CSS를 사용하여 보이지 않는 텍스트

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 &amp; width */
    width:  600px;
    white-space: nowrap;            /* because only the first line is indented */
}

로그인 후 복사

방법 2: 텍스트 숨기기

또 다른 해결책은 네거티브에 의해 생성된 커다란 보이지 않는 상자를 피하는 것입니다. 들여쓰기:

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

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

로그인 후 복사

두 방법 모두 텍스트를 화면 밖으로 밀거나 요소 내에 숨겨 원하는 결과를 얻습니다.

위 내용은 CSS를 사용하여 이미지를 표시하는 동안 텍스트를 효과적으로 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!