집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 이미지 배경의 텍스트 내용을 숨기는 방법

CSS를 사용하여 이미지 배경의 텍스트 내용을 숨기는 방법

php中世界最好的语言원래의: 2017-11-28 10:40:544395검색

이 사례는 CSS를 사용하여 이미지 배경의 텍스트 내용을 숨기는 방법에 관한 것입니다. 먼저 배경배경을 사용하여 이미지를 배경 표시로 설정한 다음 text-indentindent를 사용하여 링크 내용을 숨깁니다. 553a280de7202c0dce8dfe871821475e 링크 태그는 텍스트에 대한 앵커 텍스트 링크를 설정합니다. 아래는 예시입니다.

사례 설명 예시

여기서 CSS DIV 사례 효과를 관찰하는 것이 편리하므로 웹 사이트의 레이아웃을 구현해 보겠습니다.

확장 읽기: html img 이미지

1. CSS 코드:

h1#logo{ 
float:left;width:165px;height:60px; 
background:url(http://www.php.cn) no-repeat 0 0}
h1#logo a{display:block;width:100%;height:100%;text-indent:-9999px}

/* CSS 참고: display:block은 #logo 내의 A 태그를 블록으로 표시하고 높이 100% 및 100으로 표시합니다. % width

text-indent 이 속성은 CSS 들여쓰기 스타일로 9999px의 음수 값으로 설정하여 a 태그의 텍스트를 숨깁니다.

이렇게 하면 h1 태그 배경 이미지가 표시되어 Text Hyperlink

2. HTML 코드:

<h1 id="logo"> 
<a href="http://www.php.cn/" title="PHP中文网"> 
</a> 
</h1>

9ebda0bfa51f9356d818427ba7beb18a

Case effect

결과는 브라우저에 표시됩니다. 예제 코드를 따라가며 DIV+CSS 연습을 완료하고 브라우저에서 테스트할 수 있습니다.

중요한 설명: 원래 텍스트 내용은 HTML의 h1 태그에 설정되어 있지만 "text-indent:-9999px" 스타일을 설정하면 기본적으로 텍스트가 9999px 왼쪽으로 이동합니다. 당연히 일반 해상도 디스플레이에서는 9999px를 볼 수 없습니다. .Edge 콘텐츠의 경우 자연스럽게 이 CSS 기술을 사용하여 텍스트를 숨기는 동시에 배경 이미지가 정상적으로 표시됩니다.

요약

이미지를 CSS 배경으로 사용하고, 그 위에 텍스트를 넣고, 텍스트를 숨깁니다. 이것이 SEO에 더 실용적입니다. 그러나 실제 작업에서는 이미지의 크기, 높이 및 너비에 주의하십시오. 개체 DIV 상자를 설정할 때 적절한 높이와 너비에 주의하고 CSS 배경 스타일, 텍스트 들여쓰기, CSS 표시 및 기타 스타일 단어를 사용하십시오. 그것을 달성하기 위해. 사례와 다양한 사례를 바탕으로 실습을 통해 학습할 수 있습니다. A 앵커 텍스트를 사용하여 이미지의 텍스트를 숨기고 싶지 않은 경우 a 태그를 동일한 효과를 갖는 spa 태그, div 태그 또는 em 태그로 바꿀 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!