CSS background: transparent url() not display img

Question

Я бы хотел заменить кнопку WooCommerce «Добавить в корзину» с изображением PNG.

Я использую следующий 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, чтобы избавиться от текста «Добавить в корзину».

Тем не менее, это производит только элемент с прозрачным фоном, и нет фонового изображения:

кнопка находится непосредственно справа от поля количества продукта: example page.

Почему не отображается фоновое изображение? Благодарю.

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

Answer 2

У вас есть прозрачность, равная нулю - так вот почему вы не можете увидеть изображение. Попробуйте использовать

opacity: 1 !important; 

Непрозрачность документация: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

Answer 3

Произведите замену opacity: 1 !important; и удалить Add to cart текст кнопки, удалить текст между <button>Добавить в корзину</button>.