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 에서 사용된다는 것을 지적 할 가치가 있습니다 .
접근성에 대해 읽으려면 다음을 수행하십시오.
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)
사용하지 마십시오 { 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.
요점이 단순히 요소 내부의 텍스트를 보이지 않게하려면 rgba 값 (예 : color:rgba(0,0,0,0);깨끗하고 단순함)을 사용하여 색상 속성이 0 불투명도로 설정하십시오 .
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; }
나는 이것을 어디서 집어 냈는지 기억하지 못하지만 오랫동안 그것을 성공적으로 사용하고 있습니다.
=hide-text()
font: 0/0 a
text-shadow: none
color: transparent
내 믹스 인은 sass에 있지만 원하는대로 사용할 수 있습니다. 좋은 측정을 위해 나는 일반적으로 .hidden프로젝트 어딘가에 클래스를 두어 중복을 피하기 위해 요소에 첨부합니다.
CSS를 사용하여 컨텐츠를 다시 작성
h1{ font-size: 0px;}
h1:after {
content: "new content";
font-size: 15px;
}
이 속성을 추가하여 텍스트를 숨길 수 있습니다.
font size: 0 !important;
나는 보통 다음을 사용합니다.
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;
}
참고 URL : https://stackoverflow.com/questions/471510/hide-text-using-css
'development' 카테고리의 다른 글
| MySQL에서 datetime에 삽입 할 때 PHP date () 형식 (0) | 2020.03.17 |
|---|---|
| Rails 4에서 참조 열 마이그레이션 추가 (0) | 2020.03.17 |
| 부동 소수점은 소수점 이하 두 자리 만 표시합니다 (0) | 2020.03.17 |
| WebForms UnobtrusiveValidationMode에는 'jquery'에 대한 ScriptResourceMapping이 필요합니다. (0) | 2020.03.17 |
| Node.js (자바 스크립트)에서 어떻게 기다릴 수 있습니까? (0) | 2020.03.17 |