如何調整CSS背景圖像的不透明度而不是帶單選按鈕的圖標疊加

Question

我需要使用我在CSS中編寫的代碼的建議。

基本上，我用背景圖像替換/隱藏三個單選按鈕。當選擇其中一個圖像時，其上會出現一個check圖標。我使用此代碼的一部分here來實現此目的。

代碼工作正常，除了一個小東西 - 我想一旦check圖標出現在它的上面，不降低的同時check圖標的不透明度降低背景圖像的不透明度。到目前爲止，我還沒有能夠達到這個目標，所以需要一些專家的建議。

HTML的位置：

<div class="radio-check-switch">  

    <div class="form-item"> 
     <label for="farm_type_agri"> 
      <input type="radio" name="farm_type" id="farm_type_agri" value="One"/> 
      <div class="radio-switch-state" style="background-image:url('http://lorempixel.com/output/food-q-c-400-400-10.jpg');"> 
       <span class="icon-on"></span> 
      </div> 
      <div class="radio_lbl">One</div> 
     </label> 
    </div> 

    <div class="form-item"> 
     <label for="farm_type_fore"> 
      <input type="radio" name="farm_type" id="farm_type_fore" value="Two"/> 
      <div class="radio-switch-state" style="background-image:url('http://lorempixel.com/output/food-q-c-400-400-10.jpg');"> 
       <span class="icon-on"></span> 
      </div> 
      <div class="radio_lbl">Two</div> 
     </label> 
    </div>  

</div> 

CSS的位置：

.form-item{ 
    display:inline-block; 
} 
.radio-check-switch{ 
    margin-bottom:10px; 
} 
.radio-check-switch input[type="radio"]{ 
    display: none; 
} 
.radio-check-switch .radio-switch-state{ 
    background-color:#FFF; 
    display: inline-block; 
    border-radius:3px; 
    color:#fff; 
    transition:all .5s ease; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width:120px; 
    height:70px; 
    position: relative; 
    overflow:hidden; 
    vertical-align:middle; 
    /*overflow:hidden;*/ 
} 
.radio-check-switch .radio-switch-state .icon-on, 
.radio-check-switch .radio-switch-state .icon-off{ 
    display: inline-block; 
    text-align:center; 
    position: absolute; 
    width:100%; 
     top:0; 
} 
.radio-check-switch .radio-switch-state .icon-on:after, 
.radio-check-switch .radio-switch-state .icon-off:after{ 
    font-family:"FontAwesome"; 
    width:100%; 
    display: block; 
    line-height:50px; 
    position: absolute; 
    transition:all .5s ease; 
} 
.radio-check-switch .radio-switch-state .icon-on:after{ 
    content: "\f00c"; 
    margin-left:100; 
    left:100%; 
} 

.radio-check-switch .radio-switch-state:hover{ 
    background-color:#FFEAC1; 
    cursor:pointer; 
} 

.radio-check-switch input[type="radio"]:checked + .radio-switch-state .icon-on:after{ 
    content: "\f00c"; 
    margin-left:100; 
    left:0; 
    font-size:2em; 
    color:#F90; 
    opacity:0.4; 

} 

JSFIDDLE HERE

Answer 1

您可以創建一個afterpseudo-element，然後給它一個背景圖像

.form-item{ 
 
\t display:inline-block; 
 
} 
 
.radio-check-switch{ 
 
\t margin-bottom:10px; 
 
} 
 
.radio-check-switch input[type="radio"]{ 
 
\t display: none; 
 
} 
 
.radio-check-switch .radio-switch-state{ 
 
    position:relative; 
 
\t background-color:#FFF; 
 
\t display: inline-block; 
 
\t border-radius:3px; 
 
\t color:#fff; 
 
\t transition:all .5s ease; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t background-size: cover; 
 
\t width:120px; 
 
\t height:70px; 
 
\t position: relative; 
 
\t overflow:hidden; 
 
\t vertical-align:middle; 
 
\t /*overflow:hidden;*/ 
 
} 
 

 
.radio-switch-state:after{ 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    top:0; 
 
    left:0; 
 
    background-image:url('http://lorempixel.com/output/food-q-c-400-400-10.jpg'); 
 
    z-index:1 
 
} 
 
.radio-check-switch .radio-switch-state .icon-on, 
 
.radio-check-switch .radio-switch-state .icon-off{ 
 
\t display: inline-block; 
 
\t text-align:center; 
 
\t position: absolute; 
 
\t width:100%; 
 
\t top:0; 
 
} 
 
.radio-check-switch input[type="radio"]:checked + .radio-switch-state:after{ 
 
    opacity:.5; 
 
} 
 

 
.radio-check-switch .radio-switch-state .icon-on:after, 
 
.radio-check-switch .radio-switch-state .icon-off:after{ 
 
\t font-family:"FontAwesome"; 
 
\t width:100%; 
 
\t display: block; 
 
\t line-height:50px; 
 
\t position: absolute; 
 
\t transition:all .5s ease; 
 
} 
 
.radio-check-switch .radio-switch-state .icon-on:after{ 
 
\t content: "\f00c"; 
 
\t margin-left:100; 
 
\t left:100%; 
 
    z-index:2; 
 
} 
 
\t \t \t \t 
 
.radio-check-switch .radio-switch-state:hover{ 
 
\t background-color:#FFEAC1; 
 
\t cursor:pointer; 
 
} 
 
\t \t \t 
 
.radio-check-switch input[type="radio"]:checked + .radio-switch-state .icon-on:after{ 
 
\t content: "\f00c"; 
 
\t margin-left:100; 
 
\t left:0; 
 
\t font-size:2em; 
 
\t color:#F90; 
 
\t opacity:0.4; 
 
\t \t \t \t \t 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="radio-check-switch"> \t 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t <div class="form-item"> 
 
\t \t <label for="farm_type_agri"> 
 
\t \t \t <input type="radio" name="farm_type" id="farm_type_agri" value="One"/> 
 
\t \t \t <div class="radio-switch-state" > 
 
\t \t \t \t <span class="icon-on"></span> 
 
\t \t \t </div> 
 
      <div class="radio_lbl">One</div> 
 
\t \t </label> 
 
\t </div> 
 
\t 
 
    <div class="form-item"> 
 
\t \t <label for="farm_type_fore"> 
 
\t \t \t <input type="radio" name="farm_type" id="farm_type_fore" value="Two"/> 
 
\t \t \t <div class="radio-switch-state" > 
 
\t \t \t \t <span class="icon-on"></span> 
 
\t \t \t </div> 
 
      <div class="radio_lbl">Two</div> 
 
\t \t </label> 
 
\t </div> 
 
\t 
 
    <div class="form-item"> 
 
\t \t <label for="farm_type_grou" > 
 
\t \t \t <input type="radio" name="farm_type" id="farm_type_grou" value="Three"/> 
 
\t \t \t <div class="radio-switch-state" > 
 
\t \t \t \t <span class="icon-on"></span> 
 
\t \t \t </div> 
 
     \t <div class="radio_lbl">Three</div> 
 
\t \t </label> 
 
\t </div> 
 
        
 
       
 
</div>