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

时间:2015-07-27 13:21:10

标签: css background-image

我想用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

该按钮位于产品数量字段的右侧:enter image description here

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

3 个答案:

答案 0 :(得分:2)

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

svn commit

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

在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;
}