私は私のhtmlに次のようなタグを持っています：
<h1>My Website Title Here</h1>cssを使用して、テキストを実際のロゴに置き換えます。タグのサイズを変更し、CSSで背景画像を配置することで、ロゴは問題ありません。しかし、テキストを取り除く方法がわかりません。基本的に、テキストを画面から押し出すことによって、以前にそれが行われたのを見てきました。問題はどこで見たのか思い出せないことです。
回答:
これは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;
}なぜ単に使用しないのですか？
h1 { color: transparent; }color: transparent;user-select: none;色を上書きしない限り、と連動します。
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プロパティを使用するいくつかのより良い方法がありますが、残念ながら、Webはまだ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/
非常に多くの複雑なソリューション。
最も簡単なのは、単に使用することです：
color:rgba(0,0,0,0)この属性を追加するだけで、テキストを非表示にすることができます。
font size: 0 !important;!important句が実際に必要かどうかを確認することも重要です。私の場合、それなしでも問題なく動作しました。
<style>
body {
visibility:hidden
}
body .moz-signature p{
visibility:visible
}
</style>上記は最新のThunderbirdでもうまく動作します。
あなたはcss background-imageプロパティを使用してz-index、画像がテキストの前に留まるようにすることができます。
z-index適用されるかわかりませんbackground-image。
これは実際には議論するのに適した領域であり、多くの微妙な技術が利用可能です。スクリーンリーダー、画像/ css /スクリプトのオン/オフの組み合わせ、seoなど、ニーズに合った手法を選択/開発することが重要です。
標準化されたイメージ置換技術の道を歩むためのいくつかの優れたリソースを以下に示します。
http://faq.css-standards.org/Image_Replacement
これをどこで手に入れたのか覚えていませんが、古くからうまく利用しています。
=hide-text()
font: 0/0 a
text-shadow: none
color: transparent私のミックスインはサスですが、好きなように使用できます。通常、.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; }
マークアップを編集できれば、より簡単に、テキストを削除して幸せになれます。ただし、マークアップが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、私にとってはトリックになります：
<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>タグが検出されるまで同じ行に続きます。
これを実現する方法の1つは、: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 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;
}