CSS를 사용하여 텍스트 숨기기

내 HTML에 다음과 같은 태그가 있습니다:

<h1>My Website Title Here</h1>

CSS를 사용하여 텍스트를 실제 로고로 바꾸고 싶습니다. 태그 크기를 조정하고 CSS를 통해 배경 이미지를 넣어 로고는 문제없이 넣었습니다. 하지만 텍스트를 제거하는 방법을 알 수 없습니다. 이전에 기본적으로 텍스트를 화면 밖으로 밀어내는 방법으로 텍스트를 제거하는 것을 본 적이 있습니다. 문제는 어디서 봤는지 기억이 나지 않는다는 것입니다.

Josh Crozier
편집된 질문14일 9월 2014 в 4:50
프로그래밍
css
23일 1월 2009 в 1:19
30 파운드
질문에 대한 의견 (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 */
}

또 다른 방법은 를 슬라이드에서는 숨김니다 피하면서 있는 거대한 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;
}
해설 (16)

왜안돼요 사용하여 간단히.

h1 { color: transparent; }
해설 (9)

'추가하기만 font-size: 0; '데이터베이스에구성원을 요소를 포함하는 텍스트.

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;

<! - 언어: &gt css 랭 -;

스이든 {font-size: 0; }

<! - 언어: &gt html 로 -;

font-size: 0; 감춰집니다 사용한다. class = &quot hidden&quot &gt 스팬할 <;;; # 39, t see me can& 있습니다:) &lt /span>;

끝 - &lt 스니핏 >;!

valk
편집된 답변14일 5월 2017 в 7:29
해설 (8)

가장 브라우저 간 친화적인 방법은 HTML을 다음과 같이 작성하는 것입니다.

<h1><span>Website Title</span></h1>

로 작성한 다음 CSS를 사용하여 스팬을 숨기고 이미지를 대체하는 것입니다.

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

CSS2를 사용할 수 있다면 속성을 사용하여 더 좋은 방법이 있지만, 안타깝게도 웹은 아직 100% 지원하지 않습니다.

Robert
편집된 답변2일 7월 2015 в 12:26
해설 (4)

숨기기 액세서빌러티를 텍스트에서처럼 염두에 두고.

또 다른 대답을 슬라이드에서는 숨기기 위한 또 다른 유용한 외곽진입 사용한다.

이 방법은 아직 거주하리라 가시적입니다 화면 판독기용 효과적으로 텍스트를 감춰집니다 수 있습니다. 고려해야 할 수 있는 옵션입니다 액세서빌러티를 경우 문제가 됩니다.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

39 에 달하는 이 클래스는 현재 사용되고 있는 것 아니냐는 지적도 it& [부트스트랩에 3] [1].

39 액세서빌러티를 대한 관심이 판독값 you& 경우, re:

[1]: # 19758620 https://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3/19758620

[4]: =, = en-US&amp 러디어스슬루크 액세서빌러티를 러디어스트로계 https://developer.mozilla.org/en-us/docs/web/accessibility?

Community
편집된 답변23일 5월 2017 в 10:31
해설 (4)

제프리 셀드먼 제안됩니다 다음 해결책:

.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/

해설 (0)

메초블루 로 요약 지켜보리니 좋은 기술을 더하기 위해 각 강점, 약점, 예를 들어 html 과 css.

해설 (0)

그래서 많은 복잡한 솔루션뀉뀉뀉뀉.

하나는 단순히 가장 쉽게 사용할 수 있습니다.

color:rgba(0,0,0,0)
해설 (0)

사용하지 않는 ' {디스플레이 컨투어로 없음. 따라서} '컨텐츠 수 없게 됩니다. 운영까지도 화면 판독기에서 내용을 볼 수 있으며, 이를 대체하여 텍스트에서처럼 이미지를 시각적으로 스타일 (like a 濡쒓퀬). '사용하여 텍스트 들여 쓰기. - 999px '또는 이와 비슷한 방법을 그대로 있습니다 - & # 160, 텍스트, 시각적으로 잘 안 할 수 있다. 컨투어로 없음 ',' 디스플레이를 사용 및 텍스트 우리 곁을 떠났다.

해설 (0)

body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}

위의 작동됨 더불어 최신값 선더버드 있다.

해설 (1)

CSS '배경-이미지' 속성과 'z-index'를 사용하여 이미지가 텍스트 앞에 표시되도록 할 수 있습니다.

Linus Caldwell
편집된 답변6일 6월 2013 в 4:04
해설 (0)

왜 don& # 39, t 사용할 수 있습니다.

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

Div, span, t # 39 haven& 경우 또는 모든 요소를 작동하잖아 완벽하게 링크.

franzlorenzon
편집된 답변6일 8월 2014 в 1:21
해설 (0)

실제로 이 영역을 토론, 지금은 많은 미묘한 방법을 사용할 수 있습니다. / 개발 기술은 다음과 같은 요구를 충족하는 선택하는 것이 중요합니다. 화면 판독기에서 이미지 / css / 스크립팅하는 on/off 조합, 서재응 등.

다음은 优秀 리소스에는 시작하려면 스탠다드리스타 down the road) 의 이미지 교체품 기술입니다.

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

[http://veerle.duoh.com/blog/links/ # 난 10] [3]

[3]: http://veerle.duoh.com/blog/links/ # 난 10

해설 (0)

정답은 속성을 사용하여 스팬을 만드는 것입니다.

{디스플레이:none;} 속성을 사용하여 스팬을 만듭니다.

이 사이트]1에서 예제를 찾을 수 있습니다.

해설 (1)

요점이지 할 경우 단지 내 텍스트 요소 숨김 속성을 사용하여 'rgba 값을 설정할 수 있는 색상 0 불투명도의 rgba (0.0,0.0), 깨끗하고 단순해졌습니다.' 같은 색상:

해설 (0)

서로 다른 브라우저 및 사용 조건 태그를 사용하여 배치하십시오 css 봐야 합니다. '' 도 '와' 0px 너버 높이 0px 배치하십시오 0px 글꼴 크기 '' 합니다.

해설 (0)

이 속성을 통해 텍스트를 hide your 추가 됩니다.

font size: 0 !important;
해설 (0)
h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}
해설 (1)

이 코드를 숨기기 위해 시도하시겠습니까 줄여집니다 및 텍스트

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;

}

.hidetxt:hover { 

  visibility: hidden;

}
<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

끝 - &lt 스니핏 >;!

css 클래스 '에 사용하여 스냅하거나 숨기십시오 자히드레스트 {가시도로: 숨겨짐. } '

omar kerr
편집된 답변17일 4월 2015 в 3:21
해설 (0)

39 위로 꼽은 적이 있지만, 내가 don& t 재호출 어디서 이 성공적으로 영주하니라 사용하기

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

하지만 어떤 방식으로든 충족합니다 볼 수 있는 내 믹스인 자스 사용할 수 있습니다. 내가 내 프로젝트 '클래스' 어디선가 계속 좋은 주옵니다 일반적으로 스이든 요소에 대한 첨부하려면 복제에서는 피할 수 있습니다.

해설 (1)