如何让 PNG 在 WP Ecommerce 中显示为按钮

Question

我目前正在构建一个作为整体销售网站的网站。我无法让 PNG 作为按钮工作。 WP Ecommerce 在其所有页面上都带有一个自动“添加到购物车”按钮。我最难弄清楚这一点。到目前为止，我已对我的目录执行此操作。

1. 将自定义“添加到购物车”PNG 更改为图像目录。

2. 转到default.css页面并更改：

   input.wpsc_buy_button{}

到：

 input.wpsc_buy_button{
 background-image: url(images/addtocart.png);
 }

我不知道自己做错了什么。也许我没有在产品页面上回应它？我觉得应该有，因为我保持名称相同。

无论哪种方式，任何形式的帮助都会很棒。谢谢！

Answer 1

需要注意的几点：

1. wpsc_buy_button 类位于按钮上，而不是输入上。
2. 将按钮放入其中的 CSS 现在使用 !important 标记，因此您还必须使用此标记并更具体地使用选择器来覆盖该样式。
3. images/addtocart.png 不是媒体库中图像的有效路径。我不确定它在哪里，但路径更可能是这样的：http://inkvia.com/wp-content/uploads/2015/01/addtocart.png

示例 CSS

button.wpsc_buy_button {
  background: url(/wp-content/themes/mazine/images/addtocart.png) no-repeat !important;
  height: 43px;
  width: 180px;
}

button.wpsc_buy_button span, button.wpsc_buy_button span span {
  background: none!important;
  text-indent: -99999px;
}