javascript - 显示矩形背景而不是圆形背景

Question

我们想为图像添加圆形背景，如下所示:http://jsfiddle.net/rkEMR/8679/

所以我关注了link1 ，我正在尝试下面的 link2 中的代码，但其显示如下image，background不是圆形:

.product-options ul.options-list .label>label.colors 
{  
width: 30px; 
height: 30px; 
border-radius: 50%; 
background-size: cover !important; 
display: block; 
padding: 0 !important; 
font-size: 0; 
border: 0px solid #d1d1d1 !important;
}

编辑

脚本

var jQuery = $.noConflict(); 
jQuery(document).ready(function(){ 
var inner = Array(); 
inner = jQuery(" .product-options ul.options-list .label>label"); 
for (i=0;i<inner.length;i++){ 
var classN = inner[i].innerText; 
if (classN=="Black" || classN=="Green" || classN=="Red" || classN=="Purple" || classN=="Orange" || classN=="Pink" || classN=="Brown"){ 
inner.eq(i).addClass("colors"); 
classN = classN.toLowerCase(); 
var urlB = "http://stylebaby.com/media/catalog/custom/"+classN+".png"; 
inner.eq(i).css('background-image', 'url(' + urlB + ')'); 
} 
} 
});

Answer 1

为 <span class="label" 提供固定的高度和宽度这里。最好给它们相同的值以使元素成为正方形。

将 margin-top 应用于 label元素使其位于 span 的中心

引用附件代码:

.label {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.label label {
    margin-top: 3px !important;
}

结果应如所附屏幕截图所示: