css - Woocommerce - 为产品添加边框图像
问题描述
我正在尝试在每个产品周围添加边框图像,我在 illustrator 中设计了图像,但无法显示。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);
}
解决方案
您还需要指定border-style
and border-width
(border-image
只替换border-color
和不带width
and 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">
推荐阅读
- java - Microsoft Graph 更新事件附件未在与会者邀请中更新
- jquery - jQuery 没有验证
- unit-testing - 使用 addFilters = false 模拟 @AuthenticationPrincipal MockMvc
- sparql - SPARQL Wikidata 请求字符串内容以获取人类所属的所有组织?
- python - 如何在python中将变量从一个文件导入另一个文件
- php - 控件不进入 if(isset()))
- r - 如何在 R 包中包含原始数据
- asp.net-core - BadHttpRequestException:请求内容意外结束
- sql-server - 用户在尝试连接到 Azure SQL 数据库时收到错误号 18456
- python - 将十进制转换为二进制(Python)