html - 单击图像正在缩放而不是显示叠加图像

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 [selected checkbox ] 而不是 background-color 。

第一张图片[三 Angular 形]的代码:

脚本

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;
}