将CSS按钮更改为星形图像？

Question

我想知道如何使用CSS将普通的默认灰色HTML按钮更改为图像。

这是我要改成的图片：

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

确实如此：）

background-image很乐意接受url()声明。如果您有一堆background属性，则可以将它们简化为一个background子句。

EG。
background-image: url('img/img.png'); background-repeat: no-repeat; background-color: #5500ff;
会变成
background: url('img/img.png') no-repeat #5500ff;

Answer 3

你的选择器错了。

button.star表示类型为button的元素，其className为 star

我建议你试试

#star {
  /* styles */
}

或

input#star {
  /* styles */
}

或只使用按钮元素而不是输入。请确保将其设为type="button"，以便表单不会在IE中发布。