点击的图片正在缩放，而不是显示叠加图片

Question

当我们点击图片时，我正在为site添加该图片的背景颜色red，如下所示：

.product-options input[type="radio"]:checked + span, input[type="checkbox"]:checked + span:hover, .product-options input[type="radio"]:checked + span, input[type="checkbox"]:checked + span:focus, .product-options input[type="radio"]:checked + span, input[type="checkbox"]:checked + span:active {
        background: red !important;

    }

现在代替背景色，我需要在点击的图片上显示小image [选中的复选框]。

第一张图片的代码[三角形]：

脚本

for (i=0;i<inner.length;i++){ 
var classN = inner[i].innerText;  
if (classN=="Ared" ||classN=="Agreen" ||classN=="Ayellow" )
inner.eq(i).addClass("colors"); 
classN = classN.toLowerCase(); 
var urlB = "http://sbdev2.kidsdial.com:81/media/catalog/custom/"+classN+".png"; 
inner.eq(i).css('background-image', 'url(' + urlB + ')'); 
} 
} 
});

CSS

.colors
{
z-index: 1;
position: relative;
  top: 0;
  left: 0;
}

第二张图片的代码：[复选框]

CSS

.product-options input[type="radio"]:checked + span, input[type="checkbox"]:checked + span:hover, .product-options input[type="radio"]:checked + span, input[type="checkbox"]:checked + span:focus, .product-options input[type="radio"]:checked + span, input[type="checkbox"]:checked + span:active {
    background: none !important;
    background-image: url('http://sbdev2.kidsdial.com:81/media/catalog/custom/image1.PNG');
     z-index: 2; 

}

当我在css下面添加这个时，第一个图像以缩放显示：

position: absolute;
     top: 30px;
     left: 70px;

Answer 1

您可以尝试这些css课程，因为我测试并且工作正常：

.product-options input[type="radio"]:checked + span {
    background: none !important;
}

.product-options input[type="radio"]:checked + span:after {
    /* background: blue; */
    content: url(http://sbdev2.kidsdial.com:81/media/catalog/custom/image1.PNG);
    position: absolute;
    bottom: 10%;
    left: 30%;
    z-index: 1; /* updated! */
}


.product-options .input-box ul.options-list .label>label.colors {
    margin-top: 0 !important;
}

<强>更新

要预加载那个复选标记背景图像，这样只有在用户选择一个选项后才能下载，我们可以将其更改为：

.product-options input[type="radio"] + span:after {
    content: url("http://sbdev2.kidsdial.com:81/media/catalog/custom/image1.PNG");
    position: absolute;
    bottom: 10%;
    left: 30%;
    z-index: 1;
    display: none;
}

.product-options input[type="radio"]:checked + span:after {
    display: block;
}

当然还有那些流行风格

.product-options input[type="radio"]:checked + span {
    background: none !important;
}

.product-options .input-box ul.options-list .label>label.colors {
    margin-top: 0 !important;
}