HTML текст поверх изображений для кнопок?

Question

Я создаю свой первый сайт.Я создал изображение кнопки в gimp и сохранил его в формате jpg.Я хочу использовать эту кнопку для своих кнопок навигации на сайте.Должен ли я сделать отдельное изображение (JPEG) для каждой кнопки, или можно просто использовать одно изображение, а затем наложить текст поверх изображений на странице, используя HTML?Какая лучшая практика здесь?

Answer 1

Вы задаете вопрос больше о дизайне, чем о кодировании. Если вы можете реализовать желаемый дизайн, разработав фон из одной кнопки и наложив текст стандартным шрифтом, сделайте это! В более широком смысле: не помещайте текст в изображение, если вы просто используете стандартный шрифт.

С другой стороны, если вам нужен причудливый шрифт, который может быть изображен только на изображении, вам нужно создать специализированное изображение для каждой кнопки с текстом этой кнопки.

В этом случае обязательно вставьте изображение исключительно с помощью CSS. Никогда, ever вставьте тег <img /> с текстовой кнопкой на стр.

Answer 2

Обычно в этом случае вы используете только CSS, устанавливая свойство фона элементов, которые должны быть вашими кнопками навигации.

Например, у вас может быть ul:

<ul>
  <li><a href="link">Button1</a></li>
  <li><a href="link">Button2</a></li>
  <li><a href="link">Button3</a></li>
</ul>

, а затем просто введите его в CSS, используя background-image или аналогичные стили, посмотрите здесь для некоторых примеров ..

Answer 3

Я не видел изображения, но обычно стараюсь использовать CSS для максимально возможного графического дизайна.Кнопки, как правило, имеют очень простую конструкцию.Однако, если вам нужно использовать изображение, вы можете назначить фон тегу, а затем использовать текст в теге.Примером может быть присвоение фона

<button class="myButtonClass">MyButtonText</button>

<style>
  .myButtonClass {
    //enter your button style here.
  }
</style>

Answer 4

Определенно используйте изображения и наложенный текст. Чтобы узнать, как это сделать, обратитесь к этому руководству:

Учебное пособие по наложению изображения на кнопку

Также вы упомянули использование jpg. Попробуйте использовать PNG вместо изображений кнопок, если они не являются изображениями "реального мира". Для простых градиентов и сплошных цветов, PNG - это путь.

Answer 5

Вы можете поместить изображение в качестве фона ...

Answer 6

Зависит от того, как вы создали свой сайт, как всегда есть множество способов сделать все.

Если ваши кнопки просто статичны, я бы порекомендовал использовать изображения, и это не повредит.

<a href="#" class="home"><span>Your button</span></a>

тогда вы можете использовать css для установки фона изображения.

.home{display:block; height:20px; width:40px; background:url(image.gif);}

и вам также нужно будет спрятать текст в промежутке.

.home span{display:none;}

Нет ничего плохого в использовании простого текста, в большинстве случаев это его личные предпочтения. Просто оставьте .home span{display:none;} и замените его чем-нибудь, чтобы центрировать текст в кнопке.

Как уже упоминалось в другом ответе, также рекомендуется переносить изображения в элементы списка. Может показаться странным на первый взгляд. Но на практике это лучший способ.