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

Question

我们想为image添加一个循环背景，如下所示：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;
}

结果应该如附图所示：

Answer 2

你需要先为这样的外部矩形背景元素设置CSS（不要忘记为这些元素添加唯一的类名，如“circular-bg-clr”以避免与其他元素冲突）：

.product-options ul.options-list .label.circular-bg-clr { 
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

之后对于内部“颜色”标签，你可以改变你的CSS：

.product-options ul.options-list .label.circular-bg-clr > label.colors {
    margin: 9px auto !important;
    width: 30px;
    height: 30px
}