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를할 수 , 만당신를 CSS2사용수있면다할, ▁ways▁다▁if▁better있을 사용하는 더 좋은 방법들이 있습니다.content하지만 불행히도 웹은 아직 100%가 아닙니다.
접근성을 염두에 둔 텍스트 숨기기:
다른 답변 외에도 텍스트를 숨기는 데 유용한 또 다른 방법이 있습니다.
이 방법을 사용하면 텍스트를 효과적으로 숨기지만 화면 판독기에서 텍스트를 계속 볼 수 있습니다.접근성이 문제인지 여부를 고려할 수 있는 옵션입니다.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
이 클래스는 현재 부트스트랩 3에서 사용되고 있습니다.
내게 필요한 옵션에 대한 내용을 읽어보려면 다음을 수행합니다.
다음 속성을 추가하여 텍스트를 쉽게 숨길 수 있습니다.
font-size: 0 !important;
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/
복잡한 해결책이 너무 많습니다.
가장 쉬운 방법은 다음과 같습니다.
color:rgba(0,0,0,0)
메조블루는 장점과 단점, 그리고 예를 들어 html과 css와 함께 각 기술에 대한 멋진 요약을 참조하십시오.
<style>
body {
visibility:hidden
}
body .moz-signature p{
visibility:visible
}
</style>
위의 내용은 최신 Thunderbird에서도 잘 작동합니다.
을 사용하지 .{ display:none; }그러면 내용에 액세스할 수 없게 됩니다.화면 판독기에서 내용을 보고 텍스트를 로고와 같은 이미지로 대체하여 시각적으로 스타일을 지정할 수 있습니다.을 사용하여text-indent: -999px;또는 유사한 방법으로, 텍스트는 여전히 거기에 있습니다. 시각적으로 거기에 있지 않습니다. 사용합니다.display:none문자가 사라졌습니다.
정답은 속성으로 범위를 만드는 것입니다.
{display:none;}
이 사이트에서 예제를 찾을 수 있습니다.
은 css 당은를 css 사용수있다습을 사용할 수 .background-image과 재산z-index이미지를 텍스트 앞에 유지합니다.
다음을 사용하는 것이 어떻습니까?
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
스팬이나 디비 요소가 없는 경우 링크에 완벽하게 작동합니다.
어디서 주웠는지 기억이 안 나지만 오랫동안 성공적으로 사용해 왔습니다.
=hide-text()
font: 0/0 a
text-shadow: none
color: transparent
내 믹스인은 화가 나지만 당신이 적합하다고 생각하는 방식으로 사용할 수 있습니다.좋은 측정을 위해 저는 일반적으로 다음을 유지합니다..hidden중복을 방지하기 위해 요소에 연결할 수 있는 클래스입니다.
콘텐츠를 CSS로 바꾸기
h1{ font-size: 0px;}
h1:after {
content: "new content";
font-size: 15px;
}
이것은 실제로 많은 미묘한 기술을 사용할 수 있는 토론의 장입니다.화면 판독기, 이미지/css/스크립트 켜기/끄기 조합, seo 등을 포함하여 사용자의 요구에 맞는 기술을 선택/개발하는 것이 중요합니다.
다음은 Standardista 이미지 교체 기술을 시작하는 데 필요한 몇 가지 좋은 리소스입니다.
http://faq.css-standards.org/Image_Replacement
http://www.alistapart.com/articles/fir
http://veerle.duoh.com/blog/links/ #l-10
는 컨츠교에 CSS서직을 하여 할 수 .content소유물.
이것은 가장 일반적으로 생성하는 데 사용되는 것으로 보입니다.::before그리고.::after유사 요소이지만 기존 HTML 요소의 내용을 대체하는 데 사용할 수도 있습니다.
원본 예제의 경우
<h1>My Website Title Here</h1>
이것은 텍스트를 로고로 대체할 CSS입니다.
h1 {
content: url(mywebsitelogo.png);
width: 100%;
}
유사 요소에서는 배경 이미지로 사용하는 경우를 제외하고 모든 이미지 콘텐츠의 크기를 조정할 수 없지만 교체된 콘텐츠는 그렇지 않습니다.
기본적으로 이미지는 실제 크기로 나타나고 필요한 경우 용기를 확장합니다. 마치 실제 크기가 포함된 것처럼 정확하게 표시됩니다.<img>요소
예에서는, 이예서는에,는,width: 100%로고 이미지를 전체 너비에 맞추는 데 사용됩니다.필요에 따라 이미지를 축소해야 하지만 용기가 이미지보다 클 경우 절대 확장하지 않아야 하는 경우max-width: 100%대신 사용할 수 있습니다.
MDN에 따르면 CSS 콘텐츠 교체를 지원하지 않는 유일한 일반 브라우저는 Internet Explorer입니다.
하면 CSS를 배치해야 .height:0px그리고.width:0px은 한당신배합야니다해치은또를 넣어야 .font-size:0px.
요점이 단순히 요소 내부의 텍스트를 보이지 않게 만드는 것이라면, 다음과 같은 Argba 값을 사용하여 색상 속성을 0으로 설정합니다.color:rgba(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; }
제가 이를 달성하는 방법 중 하나는: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.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나는 상자가 커지는 것을 방지하고 싶습니다.
0에 을 사용하는 : 0을 합니다.font-size그리고.line-height요소에서 저를 위해 속임수를 씁니다.
<style>
.text {
display: block;
width: 200px;
height: 200px;
font-size: 0;
line-height: 0;
}
</style>
<span class="text">
Invisible Text
</span>
html에서 텍스트를 숨기려면 css의 text-indent 속성을 사용합니다.
.classname {
text-indent: -9999px;
white-space: nowrap;
}
동적 텍스트의 경우 적용된 CSS가 방해하지 않도록 화이트스페이스를 추가해야 합니다.nowrap은 텍스트가 다음 줄로 결코 랩되지 않는다는 것을 의미합니다. 텍스트는 다음 줄까지 동일하게 계속됩니다.<br>가 발견되었습니다.
이것은 스판(녹아웃 유효성 검사)과 관련하여 저에게 효과가 있었습니다.
<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>');
});
언급URL : https://stackoverflow.com/questions/471510/hide-text-using-css
'IT' 카테고리의 다른 글
| 마리아에서 'DEELETE'에 대해 지정된 Twice 테이블DB (0) | 2023.07.27 |
|---|---|
| PHPUunit 모의 객체 및 정적 방법 (0) | 2023.07.27 |
| Elastic Beanstalk Java 환경에 배포된 Spring Boot 애플리케이션이 502를 반환합니다. (0) | 2023.07.27 |
| JSONP 요청이 작동하는 방식에 대해 혼동됨 (0) | 2023.07.27 |
| 외부 키 제약 조건을 설정하는 방법이 라벨 5.8에서 잘못 형성되었습니다. (0) | 2023.07.27 |