У меня есть тег в моем 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%.
Джеффри Зельдман предлагает следующее решение:
.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/
В дополнение к другим ответам, вот еще один полезный подход для скрытия текста.
Этот метод эффективно скрывает текст, но позволяет ему оставаться видимым для устройств чтения с экрана. Это возможность рассмотреть вопрос о доступности.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Стоит отметить, что этот класс в настоящее время используется в Bootstrap 3.
Если вам интересно узнать о доступности:
Смотрите mezzoblue для хорошего резюме каждой техники с сильными и слабыми сторонами, плюс пример html и css.
Не использовать { display:none; } Это делает контент недоступным. Вы хотите, чтобы экранные считыватели отображали ваш контент и визуально стирали его, заменяя текст изображением (например, логотипом). Используя text-indent: -999px; или аналогичный метод, текст по-прежнему существует - просто визуально нет. Используйте display:none, и текст ушел.
Так много сложных решений.
Самый простой - просто использовать:
color:rgba(0,0,0,0)
Ответ состоит в том, чтобы создать промежуток со свойством
{display:none;}
Вы можете найти пример на этом сайте
вы можете использовать свойство css background-image и z-index, чтобы гарантировать, что изображение остается перед текстом.
<style>
body {
visibility:hidden
}
body .moz-signature p{
visibility:visible
}
</style>
Вышеупомянутое хорошо работает и в последнем Thunderbird.
Почему бы вам не использовать:
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
Если у вас нет элемента span или div, он отлично работает для ссылок.
Это на самом деле область, созревшая для обсуждения, со многими тонкими доступными методами. Важно, чтобы вы выбрали/разработали технику, которая соответствует вашим потребностям, включая: программы чтения с экрана, комбинации изображений /CSS/сценариев вкл/выкл, SEO и т.д.
Вот несколько хороших ресурсов для начала работы с технологиями замены стандартных изображений:
http://faq.css-standards.org/Image_Replacement
Использовать тег условия для разных браузеров и использовать css, который вы должны разместить
height:0px и width:0px также нужно разместить font-size:0px.
h1 {
text-indent: -3000px;
line-height: 3000px;
background-image: url(/LOGO.png);
height: 100px; width: 600px; /* height and width are a must */
}
Если целью является просто сделать текст внутри элемента невидимым, установите для атрибута цвета 0 непрозрачность, используя значение rgba, такое как color:rgba(0,0,0,0); чистое и простое.
Попробуйте этот код, чтобы сократить и скрыть текст
.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 standard dummy text ever since the 1500s, when</p>
</div>вернуть содержимое с помощью CSS
h1{ font-size: 0px;}
h1:after {
content: "new content";
font-size: 15px;
}
Если мы можем редактировать разметку, жизнь может быть проще, просто удалите текст и будьте счастливы. Но иногда разметка была помещена 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. Я хочу, чтобы окно было увеличено.
Обычно я использую:
span.hide
{
position:fixed;
right:-5000px;
}
Использование нулевого значения для 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>
Я не помню, где я взял это, но использовал его успешно целую вечность.
=hide-text()
font: 0/0 a
text-shadow: none
color: transparent
Мой микс в сасси, но вы можете использовать его любым способом, который вам подходит. Для хорошей меры я обычно держу класс .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 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;
}
Вы можете просто скрыть свой текст, добавив этот атрибут:
font size: 0 !important;
Лучший ответ работает для короткого текста, но если текст обертывает его, он просто отображается на изображении.
Один из способов сделать это - это ошибки catch с обработчиком 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;
}