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