내 HTML에 다음과 같은 태그가 있습니다.
<h1>My Website Title Here</h1>CSS를 사용하여 텍스트를 실제 로고로 바꾸고 싶습니다. 태그 크기를 조정하고 CSS를 통해 배경 이미지를 넣음으로써 아무런 문제가없는 로고가 있습니다. 그러나 텍스트를 제거하는 방법을 알 수 없습니다. 나는 기본적으로 텍스트를 화면 밖으로 밀어서 이전에 수행 된 것을 보았습니다. 문제는 내가 본 곳을 기억할 수 없다는 것입니다.
답변
이것은 한 가지 방법입니다.
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 */
}브라우저가 만들 거대한 9999 픽셀 상자를 피하면서 텍스트를 숨기는 또 다른 방법 은 다음과 같습니다 .
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;
}답변
단순히 사용하지 않는 이유 :
h1 { color: transparent; }답변
font-size: 0;텍스트가 포함 된 요소에 추가 하십시오.
.hidden { font-size: 0; } font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>답변
브라우저 간 가장 친숙한 방법은 HTML을 다음과 같이 작성하는 것입니다.
<h1><span>Website Title</span></h1>그런 다음 CSS를 사용하여 범위를 숨기고 이미지를 교체하십시오.
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}CSS2를 사용할 수 있다면 content속성을 사용하는 더 좋은 방법이 있지만 불행히도 웹은 아직 100 %가 아닙니다.
답변
접근성을 염두에두고 텍스트 숨기기 :
다른 답변 외에도 텍스트를 숨기는 또 다른 유용한 방법이 있습니다.
이 방법을 사용하면 텍스트를 효과적으로 숨기고 화면 판독기에 표시 할 수 있습니다. 접근성이 문제가 될 경우 고려할 수있는 옵션입니다.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}이 클래스는 현재 Bootstrap 3 에서 사용된다는 것을 지적 할 가치가 있습니다 .
접근성에 대해 읽으려면 다음을 수행하십시오.
답변
Jeffrey Zeldman은 다음 솔루션을 제안합니다.
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}보다 자원 집약적이어야합니다 -9999px;
여기에 대한 모든 내용을 읽으십시오.
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
