图像作为单选按钮

Question

我想使用和修改此代码。我需要在HTML代码中直接从css中获取图像src。但是如果我直接在输入中插入背景图像，它就不起作用。有没有人知道解决方案？

co

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

Answer 1

您将图片放在错误的位置，需要将它们应用到label。

＆＃13;

＆＃13;

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

＆＃13;

<div class="cc-selector">
  <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
  <label style="background-image:url(http://i.imgur.com/lXzJ1eB.png);" class="drinkcard-cc visa" for="visa"></label>
  <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
  <label style="background-image:url(http://i.imgur.com/SJbRQF7.png);" class="drinkcard-cc mastercard"for="mastercard"></label>
</div>

＆＃13;

＆＃13;

＆＃13;