使用CSS在单选按钮图像上显示叠加

Question

我正在尝试在我的单选按钮图像上显示叠加层。到目前为止，我可以为所选图像创建边框，但我无法在前面覆盖背景图像。这是我的代码：

HTML / AngularJS：

<div class="row">
    <label class="col-sm-4" ng-repeat="size in sizes">
        <input type="radio" name="radio_size" ng-model="$parent.currentSize" value="{{size.value}}" hidden/>
            <img class="img-thumbnail" src="{{size.url}}">
            <img class="overlay" src="images/greenCheck.png">
    </label>
</div>

CSS：

input[type=radio]:checked ~ .img-thumbnail {
    border: solid limegreen .3em;
    position: relative;
    opacity: 1;
}

.overlay {
    position: absolute;
    top:5%;
    left:7%;
    height: 15%;
    background: url("images/greenCheck.png");
    opacity: 1;
}

这就是我目前所拥有的： 在我点击单选按钮之前。

点击单选按钮后。

  

我希望仅在选中时显示复选标记。

Answer 1

选中收音机时，将叠加层的不透明度设置为1：

input[type=radio]:checked ~ .img-thumbnail {
    border: solid limegreen .3em;
    position: relative;
    opacity: 1;
}

.overlay {
    position: absolute;
    top:5%;
    left:7%;
    height: 15%;
    background: url("images/greenCheck.png");
    opacity: 0;
}

input[type=radio]:checked ~ .img-thumbnail + .overlay {
    opacity: 1;
}

这很有可能为复选标记转换为淡入，向transition添加.overlay，因为叠加层已隐藏，并且在添加{{}时如果指定了转换，则复选标记将淡入。

Answer 2

您需要做的只是将this.service.method().takeUntil(this.onDestroy$) .do({ complete => console.log('stream has been completed') }) .subscribe(); 选择器添加到input[type=radio]:checked，即：

.overlay

使用当前代码，您始终显示叠加层，而不仅仅是所选图像。

编辑：您不需要在此处添加图片 - 您已将其包含在CSS中，因此包含两次。

input[type=radio]:checked ~ .img-thumbnail {
    border: solid limegreen .3em;
    position: relative;
    opacity: 1;
}

/* .overlay { */                          // <- change this....
input[type=radio]:checked ~ .overlay {    // <- ...to this
    position: absolute;
    top:5%;
    left:7%;
    height: 15%;
    background: url("images/greenCheck.png");
    opacity: 1;
}

Answer 3

我的css：

label > input{ 
 visibility: hidden; 
 position: absolute; 
}
 label > input + img{ 
 cursor:pointer;
  border:2px solid transparent;
 }
label > input:checked + img{ 
border:2px solid #f00;
}