使用CSS在單選按鈕圖像上顯示疊加層

我試圖在我的單選按鈕圖像上顯示疊加層。到目前爲止，我可以爲選定的圖像創建一個邊框，但我無法獲得前景覆蓋的背景圖像。這裏是我的代碼：使用CSS在單選按鈕圖像上顯示疊加層

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

這是我目前：之前，我點擊一個單選按鈕。

當我點擊一個單選按鈕後。

我希望選中時只顯示覆選標記。

來源

2017-10-18 Freddy05

設置不透明度爲疊加爲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，因爲疊加層已經隱藏起來，並且在添加opacity: 1;時，如果指定了轉換，則複選標記將淡入。

來源

2017-10-18 07:37:36 rblarsen

非常感謝你！會標記回答！ – Freddy05

@ Freddy05只是想知道爲什麼你選擇這個簡單地將選擇器添加到已經存在的CSS規則？ – FluffyKitten

在我的回覆中，您只能在不透明度上添加轉場。這就是爲什麼我會這樣做，至少。 – rblarsen

所有你需要做的是input[type=radio]:checked選擇添加到您的.overlay過，即：

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

以您目前的代碼，你都顯示覆蓋所有的時間，不只是在選擇的圖像。

編輯：你不需要在這裏包含圖像 - 你已經包含在你的CSS，所以它包括兩次。

<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}}"> 
      <span class="overlay"></span> 
    </label> 
</div>

來源

2017-10-18 07:37:10 FluffyKitten

這工作雖然我仍然要保持我的.overlay規則，如果我刪除我的.overlay統治檢查接管我的網頁空間，並導致更多的問題。 – Freddy05

@ Freddy05你已經選擇了其他答案，這很好，但我只是很困惑你的意思在這裏 - 檢查只添加在你的覆蓋規則，所以如果你刪除它，他們肯定也會刪除檢查？ – FluffyKitten

@ Freddy05現在我看到了問題 - 您將包含兩次支票圖像，一次在HTML中，一次在CSS中。你可以從HTML（或CSS）中刪除它，否則你只是複製它:) – FluffyKitten

我的CSS：

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

來源

2017-10-18 07:41:06 vicky

使用CSS在單選按鈕圖像上顯示疊加層

回答

相關問題