如何调整 CSS 背景图像的不透明度而不是带有图标覆盖的单选按钮

Question

我需要关于我在 CSS 中编写的代码的建议。

基本上，我是 replacing/hiding 三个带背景图片的单选按钮。选择其中一张图像后，其顶部会出现一个 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

您可以创建一个 after pseudo-element 然后给它一个背景图片

.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{
    position:relative;
 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-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{
 display: inline-block;
 text-align:center;
 position: absolute;
 width:100%;
 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{
 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%;
    z-index:2;
}
    
.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;
     
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<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" >
    <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" >
    <span class="icon-on"></span>
   </div>
            <div class="radio_lbl">Two</div>
  </label>
 </div>
 
    <div class="form-item">
  <label for="farm_type_grou" >
   <input type="radio" name="farm_type" id="farm_type_grou" value="Three"/>
   <div class="radio-switch-state" >
    <span class="icon-on"></span>
   </div>
         <div class="radio_lbl">Three</div>
  </label>
 </div>
                    
                
</div>

如何调整 CSS 背景图像的不透明度而不是带有图标覆盖的单选按钮

How to adjust the opacity of CSS background image instead of radio button with an icon overlay

html

css

opacity

radio-button

twitter-bootstrap