使用css隐藏图像的完整背景

Question

我们的图像显示如下：

一旦我们鼠标点击图片，它就会添加一些背景颜色，如下所示：

但我们希望删除该背景 - 颜色。

HTML

<label for="options_455_3" class="colors" style="background-image: 

url(&quot;http://1234.com/media/catalog/custom/blue.png&quot;);">Blue </label>

CSS

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

我删除了这段代码：border-radius: 50%;所以现在它仍然在图像右侧显示一点背景，如下所示。但我也想隐藏那个。

这是Site link

我尝试了其他代码，例如border: 0 !important;，但没有任何对我有用。请帮我只用css代码。

Answer 1

点击图片时，以下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:transparent !important;
box-shadow:none !important;
}

Answer 2

您的问题实际上来自该标签的<span>父级的CSS，而不是标签本身。

<span class="label"><!-- This tag-->
    <label for="options_453_3" class="colors" style="background-image: url(&quot;http://stylebaby.com/media/catalog/custom/blue.png&quot;);">Blue </label>
</span>

在上面width: 40px;中使用的标签类中设置<span>，或者为其添加一个width: 40px;的新类，并删除空格。

Answer 3

看起来在一个样式表中指定了两次背景颜色＃e0e0e0。我复制了下面的罪魁祸首。我已将它们评论出来

第8720行

    @media only screen and (min-width: 1224px)
.product-options input[type=radio]:checked + span, input[type=checkbox]:checked + span {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
    background-color: #e0e0e0; 
}

第9281行

  @media only screen and (min-width: 1824px)
    .product-options input[type=radio]:checked + span, input[type=checkbox]:checked + span {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
         background-color: #e0e0e0; 
    }