CSS 背景：透明 url() 不显示 img

Question

我想用 PNG 图片替换 WooCommerce "Add to cart" 按钮。

我在我的子主题中使用以下 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 以去除文本 "Add to Cart"。

然而，这只会产生一个具有透明背景的元素，没有背景图像：

按钮直接在产品数量字段的右侧：example page。

为什么没有显示背景图片？谢谢。

Answer 1

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

opacity: 1 !important;

不透明度文档：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;
}

CSS 背景：透明 url() 不显示 img

CSS background: transparent url() not displaying img

css

background-image