CSS背景：透明url（）不显示img

Question

我想用PNG图片替换WooCommerce“添加到购物车”按钮。

我在我的子主题中使用以下CSS来执行此操作：

.woocommerce .single_add_to_cart_button, .woocommerce ul.products li.product .button {
  background: transparent url('http://www.tempertemper.com.au/test/wp-content/themes/temper/images/buy.png') no-repeat !important;
  opacity: 0 !important;
  width: 109px;
  height: 46px;
}

我将不透明度设置为0以删除文本“添加到购物车”。

但是，这只会生成一个背景透明的元素，而不会生成背景图像：https://github.com/facebook/react-native/issues/858

该按钮位于产品数量字段的右侧：。

为什么不显示背景图片？感谢。

Answer 1

您将不透明度设置为零 - 因此这就是您无法看到图像的原因。尝试使用

svn commit

不透明度文档：https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

Answer 2

更改opacity: 1 !important;并删除按钮中的Add to cart文字，删除<button> 添加到购物车 </button>之间的文字。

Answer 3

在styles.css（第151行）中，您将不透明度设置为0：

.woocommerce .single_add_to_cart_button, 
.woocommerce ul.products li.product .button {
   background: transparent url('http://www.tempertemper.com.au/test/wp-content/themes/temper/images/buy.png') no-repeat !important;
   opacity: 0 !important;
   width: 109px;
   height: 46px;
}