Не получается изображение через кнопку отправки

Question

Не получается изображение через кнопку отправки

0

Я пытаюсь получить изображение над моей кнопкой, но я не получаю его. Вот что я делаю.

<span id="schedule_button">
     <input type="submit" value="submit" 
             style="background-image:url(scheduler_button.gif); 
             font-size:0px; width:270 px; height:66 px" />
</span>

Где я иду не так?

saplingPro 20 апр. 2014, в 10:43

Источник

2

Попробуйте удалить пробел до width:270px; height:66px px width:270px; height:66px
JunM 20 апр. 2014, в 08:05

Теги:

html

css

button

1 ответ

Ещё вопросы

Попробуйте удалить пробел до width:270px; height:66px px width:270px; height:66px

Gaurang Tandon · Accepted Answer · 2014-04-20T06-02-00.000Z

Есть две проблемы:

Во-первых:

Обновление: как король Кинг замечает в комментариях, это только вторая проблема, которая вызывает ваши проблемы.

Элемент input по умолчанию встроен, поэтому, когда вы устанавливаете размер шрифта в 0px, для отображения значения требуется очень много места, что очень мало,

Таким образом, необходимо, чтобы его display block.

Возможно, вы захотите использовать Google Inline vs Block elements.

Второе:

Вам нужно удалить пространство в width:270 px и height:66 px.

DEMO

CSS:

input {
    background:url('http://placehold.it/270x66');
    font-size:0px;
    width:270px;
    height:66px
}

похоже, что элемент кнопки input является специальным элементом, это не элемент контейнера, поэтому display:inline или display:block не имеет значения, он все равно работает в обоих случаях jsfiddle.net/viphalongpro/5c7KU/1
@KingKing Новое открытие! Спасибо, что обратили мое внимание. Редактирую мой ответ, чтобы отразить факт.
Моя кнопка имеет круглые края. Теперь я получаю овал внутри прямоугольника. Как я могу избежать этого?
@saplingPro Я не получаю овал (в скрипке). Возможно, ваш span может иметь некоторые правила CSS. Пожалуйста, поделитесь ими также.
@saplingPro Может быть, вы этого хотите? jsfiddle.net/GaurangTandon/5c7KU/3
Я имел в виду, что получаю изображение кнопки внутри прямоугольника. Похоже, s27.postimg.org/97p2iunwj/Capture.jpg
@saplingPro Я также призываю поделиться правилами CSS вашего диапазона. Другая идея: попробуйте установить border-radius span 10% затем, возможно, 15% или 5% пока он не будет соответствовать вашим потребностям.
@saplingPro Тогда попробуйте второй трюк.
@saplingPro попробуйте эту демонстрацию jsfiddle.net/viphalongpro/5c7KU/5 На самом деле вам не нужно это изображение в качестве фона, вы можете отрендерить подобное изображение, используя градиентный фон.