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

我们要为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 + ')');
}
}
});

最佳答案

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

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

请参考所附代码：

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

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

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

关于javascript - 显示矩形背景而不是圆形背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41806957/