Замена изображений в CSS имеет обширную и разнообразную историю. В эту современную эпоху, если вы все еще хотите это сделать, есть много методов замены изображений, которые все еще работают сегодня. Важно отметить, что некоторые из них на самом деле могут быть оштрафованы Google в ближайшее время (если не уже), поэтому используйте их с осторожностью. Тем не менее, вы никогда не знаете, когда CMS или проект заставит вас получить комплект для замены изображения! Вот тот исторический набор, который может оказаться последним списком методов замены изображений, который вам понадобится, прежде чем Интернет полностью выйдет за рамки этого.
Работа от SitePoint / Наталья Бальская
Использование негативного текстового отступа — метод Фарка
Это наиболее распространенный метод, который большинство веб-разработчиков использовали в тот или иной момент. Идея в том, чтобы переместить текст далеко за пределы окна браузера, установив большой отрицательный text-indent :
.replace-indent { width: 264px; height: 106px; background: url("assets/logo.png"); text-indent: -9999px; }
Вот демонстрация CodePen, показывающая, как выглядит заголовок с текстом, скрытым с помощью text-indent :
Этот текст по-прежнему доступен для программ чтения с экрана. Однако это решение не будет работать, если текст выровнен по правому краю. Браузер также должен отобразить очень большой блок для нашего заголовка из text-indent значения text-indent которое может быть проблематичным на очень старых устройствах.
Метод Скотта Келлума
Вместо установки большого отрицательного text-indent , вы можете установить его на 100%. Таким образом, браузеру не нужно будет создавать большую коробку, и производительность улучшится. Вам не нужна дополнительная разметка, чтобы использовать этот метод. Вот CSS, который вам нужен:
.replace-scott { width: 264px; height: 106px; background: url("assets/logo.png"); text-indent: 100%; white-space: nowrap; overflow: hidden; }
Установка overflow на hidden скрывает текст и whitespace: nowrap препятствует его перемещению на следующую строку. Этот метод все равно будет читаться программами чтения с экрана. Вот демонстрация этой техники:
Использование маржи — техника Раду Дарваша
Этот метод также заставляет текст за пределами окна браузера, но использует поля для этого. Идея в том, чтобы применить очень большое отрицательное левое поле и придать заголовку соответственно большую ширину.
.replace-margin { width: 2264px; height: 106px; background: url("assets/logo.png") top right no-repeat; margin: 0 0 0 -2000px; }
Как и в предыдущем случае, наш логотип используется в качестве фонового изображения для заголовка. Вот демонстрация, чтобы показать, как работает этот метод, сначала без наценки, а затем с наложенной наценкой:
Если вы продолжите прокручивать вправо, вы в конечном итоге увидите фон для первого заголовка. В действительности вам не придется беспокоиться о полосе прокрутки, потому что большое отрицательное поле компенсирует ширину (как вы можете видеть со вторым заголовком). Имейте в виду, что этот метод не так эффективен для браузера, потому что браузер должен нарисовать действительно большую рамку.
Использование заполнения — метод Ленгриджа
На этот раз мы выталкиваем текст за пределы нашего заголовка, используя свойство padding-top . Для свойства должно быть установлено значение, равное высоте нашего логотипа. Однако одного этого недостаточно, и мы также должны использовать overflow: hidden чтобы скрыть текст.
.replace-padding { width: 264px; height: 0; background: url("assets/logo.png"); padding: 106px 0 0 0; overflow: hidden; }
По сравнению с предыдущими двумя методами это свойство значительно улучшает производительность. Он также предлагает тот же уровень доступности, что и предыдущие два метода. Ниже приведена демонстрация этой техники: первый заголовок не имеет фона отступов, а второй -:
Использование малого font-size — метод Линдси
Другой способ скрыть текст — сделать его очень маленьким и установить его цвет на фоне вашего логотипа. Это работает без ущерба для доступности, но вы можете столкнуться с штрафами за SEO из-за крошечного размера шрифта и замаскированного цвета.
.replace-font { width: 264px; height: 106px; background: url("assets/logo.png"); font-size: 1px; color: white; }
Вот демонстрация этого метода: первое изображение без фиксированного font-size и второе с ним в действии:
Вы по-прежнему будете сталкиваться с проблемами, если ваш логотип не имеет ровный цвет фона для идеального смешивания. В этом случае вы можете установить transparent цвет.
Использование дисплея — замена изображения по Фарнеру
В отличие от других методов, этот требует добавления дополнительной разметки. Идея заключается в том, чтобы обернуть ваш текст в элемент <span> и установить для его свойства display значение none . Разметка в этом случае будет:
<h1 class="replace-display"> <span>SitePoint</span> </h1>
CSS будет:
.replace-display { width: 264px; height: 106px; background: url("assets/logo.png"); } .replace-display span{ display: none; }
Вот демонстрация с display нашего элемента < span > равным none :
Этот метод, хотя и прост в реализации, приводит к плохой доступности. Это связано с тем, что элементы с display на none display экрана игнорируются. Точно такая же проблема возникает с visibility установленной на hidden поэтому вы также не можете использовать ее. Что вы можете сделать, это установить opacity на 0 . Это скроет элемент, оставляя его доступным для программ чтения с экрана.
Использование переполнения — метод Леона Дуайера
Мы уже использовали свойство overflow чтобы скрыть наш текст после добавления отступов. На этот раз мы будем использовать только свойство overflow чтобы полностью скрыть элемент. Использование этой техники требует, чтобы вы завернули свой текст в элемент <span> как и предыдущий метод. Наш CSS на этот раз выглядит так:
.replace-overflow { width: 264px; height: 106px; background: url("assets/logo.png"); } .replace-overflow span { display: block; width: 0; height: 0; overflow: hidden; }
Мы устанавливаем ширину и высоту нашего элемента span на ноль. Это заставляет текст внутри элемента перемещаться из его поля. Текст затем overflow: hidden свойством overflow: hidden . Вот демонстрация CodePen, иллюстрирующая эту технику:
Текст по-прежнему доступен для программ чтения с экрана. Следовательно, нет никаких проблем доступности.
Использование абсолютного позиционирования — техника Левина
Этот метод также требует дополнительного элемента <span> для работы. Однако элемент <span> не оборачивается вокруг текста, а используется для позиционирования нашего изображения. Вот разметка для этого метода:
<h1 class="replace-position"> <span></span>SitePoint </h1>
Вот CSS:
.replace-position { width: 264px; height: 106px; position: relative; } .replace-position span { background: url("assets/logo.png"); width: 100%; height: 100%; position: absolute; }
Демо для замены изображения с абсолютным позиционированием видно ниже:
Обратите внимание, что ширина и высота установлены на 100%, чтобы полностью покрыть наш элемент заголовка. Единственная проблема с этой техникой заключается в том, что используемые вами изображения должны быть полностью непрозрачными. Если это не так, то пользователи смогут увидеть текст через ваше изображение.
Использование фиктивного изображения — Раду Дарвас Шим
Этот метод также требует поддельного изображения в дополнение к нашему обычному элементу <span> для правильной работы. Изображение представляет собой прозрачный GIF размером 1 × 1 пиксель. Его основная цель — показать пользователям альтернативный текст, если изображения отключены. Вот разметка:
<h1 class="replace-image-span"> <img src="assets/transparent.gif" alt="SitePoint" /> <span>SitePoint</span> </h1>
Это CSS, который вам нужно применить:
.replace-image-span { width: 264px; height: 106px; background: url("assets/logo.png"); } .replace-image-span span{ display: none; }
Демонстрация ниже должна прояснить, как работает этот метод:
Даже если сам текст скрыт, программы чтения с экрана все равно смогут прочитать тег alt. Таким образом, этот метод не создает никаких проблем с доступностью. Единственная проблема здесь в том, что <img> является семантическим и в данном случае поддельным. Кроме того, вы увидите текст два раза, если и CSS, и изображения отключены.
Использование фактического изображения — метод Фарка с встроенным изображением
На этот раз мы будем использовать реальное изображение для замены изображения. Изображение содержит альтернативный текст, который будет отображаться при выключении изображения. Вот разметка:
<h1 class="replace-image-link"> <img src="assets/logo.png" alt="SitePoint" /> </h1>
Следующий CSS выполняет фактическую замену:
.replace-image-link { width: 264px; height: 106px; background: url("assets/logo.png"); text-indent: -9999px; }
Демонстрация ниже иллюстрирует, как работает этот метод:
Изображение, которое вы увидите сейчас, не из <img> а из свойства background . Помимо проблемы с большим отрицательным отступом текста, которую мы обсуждали ранее, эта техника, похоже, не подходит для SEO. Одно из преимуществ этого метода перед другими заключается в том, что изображение будет по-прежнему видно при выключенном CSS и сохранении изображений, но возникает вопрос, почему бы вам не оставить это изображение отдельно…
Использование Clip-path
Свойство clip-path скрывает все, что находится за пределами указанного вами пути. Мы можем использовать его, чтобы обрезать наш текст и скрыть его. Текст по-прежнему будет доступен для программ чтения с экрана, но будет скрыт визуально. Вот разметка:
<h1 class="replace-clip-path"> <span>SitePoint</span> </h1>
Это CSS, который вам нужно применить:
.replace-clip-path { width: 264px; height: 106px; background: url("assets/logo.png"); } .replace-clip-path span{ clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); }
Вы можете изменить значения clip-path чтобы увидеть, как обрезается текст:
Единственная проблема с этой техникой заключается в том, что поддержка браузера еще недостаточно хороша. SitePoint недавно опубликовал статью о свойстве clip-path которой обсуждается это свойство более подробно. К тому времени, когда поддержка браузера будет готова к этому, в большинстве ситуаций это станет ненужным, поскольку методы замены изображений становятся излишними.
Использование псевдоэлемента — замена изображения Нэша
Этот метод использует псевдоэлемент, чтобы отодвинуть текст в сторону. Вот разметка:
<h1 class="replace-pseudo"> SitePoint </h1>
Следующий CSS заставляет эту технику работать:
.replace-pseudo { width: 264px; height: 106px; overflow: hidden; } .replace-pseudo:before{ content: url("assets/logo.png"); },.replace-pseudo { width: 264px; height: 106px; overflow: hidden; } .replace-pseudo:before{ content: url("assets/logo.png"); }
Вот демонстрация, чтобы показать эту технику в действии:
Псевдоэлемент отодвигает текст в сторону. Текст переполняется и скрывается с помощью свойства overflow: hidden . Одна из проблем этого метода заключается в том, что он работает только с Internet Explorer 8 и выше.
Вывод
Каждый из методов, которые я обсуждал выше, имеет свои плюсы и минусы. В целом, они вряд ли будут полезны для SEO в ближайшем будущем, и если вы можете избежать их полного использования — сейчас самое время выйти за эти рамки! В следующей статье здесь, на SitePoint, мы рассмотрим, как индустрия выходит за рамки этих и какова текущая лучшая практика сегодня. Если у вас есть какие-то другие приемы, о которых вы хотели бы вспомнить, или если у вас есть что-то еще, что можно добавить относительно техник, которые мы обсуждали, пожалуйста, прокомментируйте ниже.
Обновление от PatCat (30/06/2016): В статье изначально говорилось, что использование изображений в заголовках сайта негативно повлияет на SEO и доступность. Это не правда На самом деле, с потенциальными штрафами Google за замену изображений может быть и обратное. С тех пор я исправил статью, спасибо острым глазам комментаторов за то, что они привлекли мое внимание!