Сховати текст за допомогою 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

Джеффрі Зельдман пропонує таке рішення:

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

Дивіться mezzoblue, щоб отримати хороший підсумок кожної методики з сильними та слабкими сторонами, а також приклади html та css.

Стільки складних рішень.

Найпростіший - просто використовувати:

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.

ви можете використовувати background-imageвластивість css та 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 / сценаріїв увімкнення / вимкнення, seo тощо.

Ось кілька хороших ресурсів, щоб розпочати шлях стандартних методів заміни зображень:

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

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

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

Використовуйте тег Condition для іншого веб-переглядача та використовуючи css, який потрібно розмістити, height:0pxа width:0pxтакож його потрібно розмістити font-size:0px.

Якщо суть просто в тому, щоб зробити текст всередині елемента невидимим, встановіть атрибут кольору таким, що має 0 непрозорості, використовуючи значення rgba, таке color:rgba(0,0,0,0);чисте та просте.

Я не пам'ятаю, де я це взяв, але успішно використовую його протягом століть.

  =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; }

repalce вміст за допомогою 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в елементі робить для мене хитрість:

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

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

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

Щоб приховати текст з html, використовуйте властивість text-indent у 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 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;
 }