Изменить кнопку CSS в изображение звезды?

Question

Я хочу знать, как можно изменить обычную стандартную серую кнопку HTML в изображение с помощью CSS.

Это изображение, которое я хочу изменить:

button.star {
    background-image: url(img/star.jpg); 
}

Это изображение, которое я использую. Это для фаворита предмета. Спасибо:)

Это способ сделать это?

Answer 1

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

В качестве фона

button {
    background: url('http://imgur.com/I0EwG.png') transparent;
    height: 48px;
    width: 45px;
    border: none;
}​

http://jsfiddle.net/robert/Wzu2S/

В кнопке

HTML

<button><img src='http://imgur.com/I0EwG.png' /></button>​​​​​​​​​​​​​

CSS

button {
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

http://jsfiddle.net/robert/DjYmR/

Answer 2

Ваш селектор неверен.

button.star означает элемент типа button с именем класса star

Я предлагаю вам попробовать

#star {
  /* styles */
}

или

input#star {
  /* styles */
}

или просто используйте элемент кнопки вместо ввода.Убедитесь, что вы сделали type="button", чтобы форма не публиковалась в IE.

Answer 3

Это действительно:)

background-image с радостью примет заявление url(). Если у вас есть набор background свойств, они могут быть сведены в одно предложение background.

Например.
background-image: url('img/img.png'); background-repeat: no-repeat; background-color: #5500ff;
превратится в
background: url('img/img.png') no-repeat #5500ff;