Скройте текст с помощью CSS

Question

Скройте текст с помощью CSS

296

css

задан Josh Crozier 13 September 2014 в 17:50

6 ответов

Это - на самом деле область, готовая к обсуждению со многими тонкими доступными методами. Важно, чтобы Вы выбрали/разработали технику, которая удовлетворяет Ваши потребности включая: программы экранного доступа, images/css/scripting комбинации включения - выключения, SEO, и т.д.

Вот являются некоторыми хорошими ресурсами для начала работы в будущем standardista методов замены изображения:

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

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

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

4

ответ дан willoller 23 November 2019 в 01:32

Ответ должен создать промежуток со свойством

{display:none;}

, можно найти пример в этот сайт

4

ответ дан Andrei Krotkov 23 November 2019 в 01:32

можно использовать свойство css background-image и z-index, чтобы гарантировать, что изображение остается перед текстом.

5

ответ дан Linus Caldwell 23 November 2019 в 01:32

Большая часть перекрестного браузера, который дружественный путь состоит в том, чтобы записать HTML как

<h1><span>Website Title</span></h1>

тогда CSS использования, чтобы скрыть промежуток и заменить изображение

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

, Если можно использовать CSS2, тогда существует некоторые лучшие способы использовать content свойство, но к сожалению сеть еще не составляет 100% там.

30

ответ дан Robert 23 November 2019 в 01:32

См. mezzoblue для подробного описания каждой техники, с сильными и слабыми сторонами, а также с примерами html и css.

14

ответ дан 23 November 2019 в 01:32

Другие вопросы по тегам:

css

Похожие вопросы:

score 418 · Accepted Answer

Это - один путь:

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 */
}

Вот иначе для сокрытия текста при предотвращении огромного поля на 9 999 пикселей, которое создаст браузер:

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