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

내 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 에서 사용된다는 것을 지적 할 가치가 있습니다 .

접근성에 대해 읽으려면 다음을 수행하십시오.

• 웹 접근성 이니셔티브 (WAI)

• MDN 접근성 문서

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/

장점과 단점, html 및 CSS 예제와 함께 각 기술에 대한 요약을 보려면 mezzoblue 를 참조하십시오 .

너무 많은 복잡한 솔루션.

가장 쉬운 방법은 단순히 사용하는 것입니다.

color:rgba(0,0,0,0)

이 속성을 추가하여 텍스트를 숨길 수 있습니다.

font size: 0 !important;

사용하지 마십시오 { display:none; }. 내용에 액세스 할 수 없습니다. 스크린 리더가 콘텐츠를보고 텍스트를 이미지 (예 : 로고)로 바꿔 시각적으로 스타일을 지정하려고합니다. 사용하여 text-indent: -999px;그냥 눈이 - 또는 유사한 방법, 텍스트는 여전히 존재한다. 를 사용 display:none하면 텍스트가 사라집니다.

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

위의 내용은 최신 Thunderbird에서도 잘 작동합니다.

css background-image속성 z-index을 사용하여 이미지가 텍스트 앞에 유지되도록 할 수 있습니다 .

왜 사용하지 않습니까?

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

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

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

span 또는 div 요소가 없으면 링크에 완벽하게 작동합니다.

대답은 속성으로 범위를 만드는 것입니다

{display:none;}

이 사이트 에서 예를 찾을 수 있습니다

이것은 실제로 많은 미묘한 기술을 사용할 수있는 논의가 필요한 영역입니다. 스크린 리더, 이미지 / css / 스크립팅 온 / 오프 조합, 검색 엔진 최적화 등 요구 사항에 맞는 기술을 선택 / 개발하는 것이 중요합니다.

다음은 standardista 이미지 교체 기술을 시작하는 데 유용한 자료입니다.

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

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

http://veerle.duoh.com/blog/links/#l-10

사용 조건 다른 브라우저에 대한 태그 사용 CSS를 당신은 장소에있는 height:0px그리고 width:0px또한 당신은 장소에 있습니다 font-size:0px.

요점은 단순히 요소 내부의 텍스트를 보이지 않게하려면 color:rgba(0,0,0,0);깨끗하고 단순함과 같은 rgba 값을 사용하여 색상 속성을 0 불투명도로 설정하십시오 .

나는 이것을 어디서 집어 냈는지 기억하지 못하지만 오랫동안 그것을 성공적으로 사용하고 있습니다.

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

내 믹스 인은 sass에 있지만 원하는대로 사용할 수 있습니다. 좋은 측정을 위해 나는 일반적으로 .hidden프로젝트 어딘가에 클래스를 두어 중복을 피하기 위해 요소에 첨부합니다.

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

}

이 코드를 사용하여 텍스트를 줄이거 나 숨기십시오.

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

또는 CSS 클래스에서 사용을 숨기려면 .hidetxt { visibility: hidden; }

CSS를 사용하여 컨텐츠를 다시 작성

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

나는 보통 다음을 사용합니다.

span.hide
{
  position:fixed;
  right:-5000px;
}

마크 업을 편집 할 수 있으면 인생이 더 쉬워 질 수 있습니다. 텍스트를 삭제하고 행복하세요. 그러나 때로는 마크 업이 JS 코드에 의해 배치되었거나 전혀 편집 할 수 없었으며 너무 나쁜 CSS는 우리가 처분 할 수있는 유일한 무기가되었습니다.

<span>텍스트 줄 바꿈을 배치하고 전체 태그를 숨길 수 없습니다 . 그건 그렇고, 일부 브라우저는display:none 뿐만 아니라 내부의 구성 요소를 비활성화합니다.

모두 font-size:0px와color:transparent 좋은 솔루션이 될 수 있지만, 일부 브라우저는 그들을 이해하지 않습니다. 우리는 그들에게 의지 할 수 없습니다.

나는 제안한다 :

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

를 사용하면 overflow:hidden너비와 높이가 적용됩니다. 일부 브라우저 (그 ... 이름되지 않습니다 IE를 ) 폭과 같은 높이 읽을 수 있습니다 min-width와 min-height. 상자가 확대되는 것을 방지하고 싶습니다.

요소 에 font-size및 line-height요소에 0 값을 사용 하면 트릭이 수행됩니다.

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

HTML에서 텍스트를 숨기려면 CSS의 텍스트 들여 쓰기 속성을 사용하십시오.

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/ * 동적 텍스트의 경우 공백을 추가해야하므로 적용된 CSS가 방해받지 않습니다. 때까지 텍스트가 다음 줄로 줄 바꿈하지 않습니다 파라미터 nowrap 수단은, 텍스트가 같은 줄에 계속 <br>태그를 검출

나는 이것을 달성하는 방법 중 하나는 사용하는 것입니다 :before나 :after. 나는이 접근법을 몇 년 동안 사용해 왔으며 특히 글리프 벡터 아이콘으로 훌륭하게 작동합니다.

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

이것은 span (knockout validation)으로 저에게 효과적이었습니다.

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

나를 위해 작동하는 솔루션 :

HTML

<div class="website_title"><span>My Website Title Here</span></div>

CSS

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

가장 좋은 대답은 짧은 텍스트에 효과적이지만 텍스트가 줄 바꿈하면 이미지에 나타납니다.

이를 수행하는 한 가지 방법은 jquery 핸들러로 오류를 포착하는 것입니다. 이미지를로드하려고하면 실패하면 오류가 발생합니다.

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

샘플 코드 참조

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }