Woocommerce - Добавить изображение границы для продуктов - PullRequest
Новая
       17

Woocommerce - Добавить изображение границы для продуктов

3 голосов
/ 09 апреля 2019

Я пытаюсь добавить изображение рамки вокруг каждого продукта, я разработал изображение в иллюстраторе, но не могу его показать.Src и т. Д. Верны. 

.woocommerce ul.products li.product, .woocommerce-page ul.products 
li.product {
    border-image-slice: 50 56 27 58;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source:url(bkg-img.png);
}

изображение как есть enter image description here

1 Ответ

2 голосов
/ 09 апреля 2019

Необходимо также указать border-style и border-width (border-image заменяет только border-color и без width и style, по умолчанию 0, none соответственно): 

img {
  border: 20px solid;
  border-image-slice: 50 56 27 58;
  border-image-width: 20px;
  border-image-outset: 0;
  border-image-repeat: stretch stretch;
  border-image-source: url('https://i.stack.imgur.com/xAphp.png');
}
<img src="https://via.placeholder.com/135">

<img src="https://via.placeholder.com/400x135">
...