更改div的不透明度，但不是其內部

Question

我爲我的項目創建簡單的動畫。在圖像上懸停後，我得到這個效果：http://imgur.com/a/L3mwF。 事情是我將梯度前景的不透明度從0改爲0.8。它也會使圖標和文字變得不透明。我想漸變不透明度改爲0.8和圖標+文字1. 這裏是我的html代碼

<div class="col-xs-12 col-sm-4 wrapper"> 
     <div class="about__gallery--bg"> 

     </div> 
     <div class="about__gallery--top"> 
      <div class="row inner"> 
       <img class="img-responsive" src="./img/pictograms/aboutus_pic1_icon.png" alt=""> 
       <span>Super team</span> 
      </div> 
     </div> 
     <div class="about__gallery__img about__gallery__img--1"> 
     </div> 
    </div> 

這是我的青菜代碼

.about__gallery { 
&__img { 
     width: 380px; 
     height: 250px; 
     opacity: 1; 
     z-index: 50; 
     &--1 { 
     background: url('../img/aboutus_pic1.png'); 
     background-size:cover; 
     } 
    } 
    &--bg { 
     width: 380px; 
     height: 250px; 
     opacity: 1; 
     z-index: -100; 
     position: absolute; 
     background-color: $color-blue; 
    } 
    &--top { 
     width: 380px; 
     height: 250px; 
     opacity: 0; 
     z-index: 90; 
     position: absolute; 
     background: linear-gradient($color-red, $color-yellow); 
     img{ 
     display: block; 
     margin:auto; 
     margin-top: 15%; 
     } 
     span{ 
     text-transform: uppercase; 
     font-weight: bold; 
     color:white; 
     display:block; 
     } 
     &:hover { 
     opacity: 0.8; 
     margin-top: -15px; 
     margin-left: -15px; 
     margin-bottom: 15px; 
     -webkit-transition: all 0.7s ease-out; 
     -moz-transition: all 0.7s ease-out; 
     -ms-transition: all 0.7s ease-out; 
     -o-transition: all 0.7s ease-out; 
     transition: all 0.7s ease-out; 
     } 
     &:hover + .about__gallery__img { 
     margin-bottom: 15px; 
     margin-top: -15px; 
     margin-left: -15px; 
     -webkit-transition: all 0.7s ease-out; 
     -moz-transition: all 0.7s ease-out; 
     -ms-transition: all 0.7s ease-out; 
     -o-transition: all 0.7s ease-out; 
     transition: all 0.7s ease-out; 
     } 
    } 
} 

Answer 1

我沒有看到你的圖標，但如果我瞭解你要做什麼，在元素上使用opacity: 1，使用rgba()來控制漸變不透明度。

.about__gallery__img { 
 
    width: 380px; 
 
    height: 250px; 
 
    opacity: 1; 
 
    z-index: 50; 
 
} 
 
.about__gallery__img--1 { 
 
    background: url("http://kenwheeler.github.io/slick/img/lazyfonz2.png"); 
 
    background-size: cover; 
 
} 
 
.about__gallery--bg { 
 
    width: 380px; 
 
    height: 250px; 
 
    opacity: 1; 
 
    z-index: -100; 
 
    position: absolute; 
 
    background-color: blue; 
 
} 
 
.about__gallery--top { 
 
    width: 380px; 
 
    height: 250px; 
 
    opacity: 0; 
 
    z-index: 90; 
 
    position: absolute; 
 
    background: linear-gradient(rgba(255, 0, 0, 0.8), rgba(0, 255, 255, 0.8)); 
 
} 
 
.about__gallery--top img { 
 
    display: block; 
 
    margin: auto; 
 
    margin-top: 15%; 
 
} 
 
.about__gallery--top span { 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    color: white; 
 
    display: block; 
 
} 
 
.about__gallery--top:hover { 
 
    opacity: 1; 
 
    margin-top: -15px; 
 
    margin-left: -15px; 
 
    margin-bottom: 15px; 
 
    -webkit-transition: all 0.7s ease-out; 
 
    -moz-transition: all 0.7s ease-out; 
 
    -ms-transition: all 0.7s ease-out; 
 
    -o-transition: all 0.7s ease-out; 
 
    transition: all 0.7s ease-out; 
 
} 
 
.about__gallery--top:hover + .about__gallery__img { 
 
    margin-bottom: 15px; 
 
    margin-top: -15px; 
 
    margin-left: -15px; 
 
    -webkit-transition: all 0.7s ease-out; 
 
    -moz-transition: all 0.7s ease-out; 
 
    -ms-transition: all 0.7s ease-out; 
 
    -o-transition: all 0.7s ease-out; 
 
    transition: all 0.7s ease-out; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-xs-12 col-sm-4 wrapper"> 
 
    <div class="about__gallery--bg"> 
 

 
    </div> 
 
    <div class="about__gallery--top"> 
 
    <div class="row inner"> 
 
     <img class="img-responsive" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt=""> 
 
     <span>Super team</span> 
 
    </div> 
 
    </div> 
 
    <div class="about__gallery__img about__gallery__img--1"> 
 
    </div> 
 
</div>