Создание пользовательской кнопки HTML с фоновым изображением и текстом - PullRequest
Новая
       38

Создание пользовательской кнопки HTML с фоновым изображением и текстом

2 голосов
/ 09 декабря 2011

Я хотел бы знать, как я могу создать пользовательскую кнопку HTML с фоновым изображением, и я могу показать собственный текст поверх этого изображения.

Например, я хотел бы показать кнопку отправки, для которой у меня есть фоновое изображение для этой кнопки, и текст «Отправить» появляется поверх этого изображения.

Я пробовал это - 

<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">

Однако он не работает должным образом. Я просто вижу отправку теста и кнопку, но изображение не отображается.

Было бы замечательно, если бы кто-нибудь помог мне с этим.

Ответы [ 4 ]

5 голосов
/ 09 декабря 2011

Я рекомендую вам использовать <button> вместо <input type='submit' /> или <input type='button' />.Причина в том, что вы можете встраивать элементы HTML (вложенные элементы) в элемент <button>.Таким образом, вы можете сделать гораздо более гибкую кнопку, которую можно настроить еще больше. 

<button>
    <span class='image'></span>
    <span class='text'>Click Me!</span>
</button>
4 голосов
/ 09 декабря 2011 
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">

Вы должны указать ширину и высоту изображения, чтобы оно покрывало вашу кнопку, и да, проверить путь к изображению

это именно то, что у меня есть в одном из моих css и обычно то, что я делаю в этой ситуации:

HTML 

<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>

1009 * CSS * 

.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
1 голос
/ 09 декабря 2011

Самый простой способ - использовать элемент кнопки с фоном. Используйте, например, Свойства отступа, чтобы сделать кнопку достаточно большой. Это полезная мера предосторожности, чтобы установить цвет фона для кнопки, для использования, когда фоновое изображение не показано по какой-либо причине, используя цвет, который имеет достаточный контраст с текстом (поэтому он должен быть похожим по использованию цвета с фоновым изображением). ). Пример: 

<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>

Предупреждение: в старых версиях IE есть несколько ошибок в реализации элементов кнопки. Ошибки кусаются наиболее серьезно, если в форме есть несколько кнопок отправки.

Причиной сбоя при использовании элемента input type = submit является то, что они обычно реализуются браузерами, использующими встроенные подпрограммы, которые довольно невосприимчивы к CSS.

0 голосов
/ 08 июня 2015

Вот как я создал кнопки с реальными картинками на них вместе с текстом.В CSS я поставил: 

button {
    display: inline-block;
    height: 200px;
    padding: 2px;
    margin: 2px;
    vertical-align: top;
    width: 400px;
 }

#alldogs-close-CSS {
     background-image: url( All_dogs.jpg );
     /*background-size: 100px 130px;*/
     height: 150px;
     width: 300px;
}

Кнопка контролирует мою высоту и ширину, а #alldogs-close-CSS - это изображение, которое я хотел показать на кнопке.

На моей странице Index.html я простоput: 

<button id="alldogs-close-CSS">All Dogs</button>

Сейчас текст не очень красивый, но я еще не играл с ним.Это работает, хотя.

...