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

Question

У меня проблемы с избавлением от серой границы в моей кнопке с фоновым изображением. Я попытался собрать общедоступный пример на jsfiddle, и я даже не могу заставить его работать, так как спрайт изображения также не отображается:

http://jsfiddle.net/3vPpt

Итак, мои два вопроса:

1) Почему фоновое изображение не отображается в моем jsfiddle

2) И после того, как мы увидим спрайт, как мне избавиться от серой границы, которая является исходной кнопкой? Я только хочу, чтобы появился спрайт.

Answer 1

Попробуйте это .

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

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

Обратите внимание, что вы все еще можете столкнуться со странными проблемами с отступами / полями, но это может быть связано с другим вопросом. Firefox, по крайней мере, любит применять дополнительные несколько пикселей отступов к элементам кнопок даже после удаления их границы.

Answer 2

Попробуйте применить класс thumb_up к тегу кнопки и удалите img изнутри кнопки следующим образом.

<button class="thumb_up" onclick=";return false;" title="I LIKE" type="button" class="">   </button>

А затем добавьте "border: 0;"«thumb_up» CSS

.thumb_up {
  background: no-repeat url("http://www.mattsbits.co.uk/user_media/uploaded_media/sp2010_formatmap32x32.png") 0 0;
  width: 200px;
  height:200px;
  border: 0;
}

Answer 3

Если это форма, используйте тип ввода image ... или просто используйте div с onclick для отправки