Прозрачный фон родителя делает детские изображения прозрачными

Question

Я установил свой основной фон в прозрачный, я помещаю изображение поверх фона, наследующего непрозрачность 0.4, я не хочу этого. Я хочу, чтобы он был на 100%. Я даже пытался opacity 1.0 не работает вот мой код:

HTML:

<!-- Background --> 
<img src="img/bg.jpg" id="bg" alt=""> 

<!-- The image --> 
<div class = "row"> 
    <div class = "logo"> 

     <img src="img/logo.png" width="100%" height="141" id="logo" alt="Title" /> 
     </div> 
     </div> 

CSS:

//Background 
    #bg { 
     position: fixed; 
     top: 0; 
     left: 0; 
     opacity: 0.4; 

     width: 100%; 
     min-height: 100%; 
    } 

//the image 
#logo { 
    opacity : 1.0;!important; 
} 

Answer 1

Оказывается, что канал непрозрачности наследуется

попробуйте использовать вместо этого rgba:

background-color: rgba(0, 0, 0, 1); /* red, gree, blue, alpha (opacity) */

Кредит: [? Удалить наследование непрозрачности от родителей] ответ адаптировано из this one

#bg { 
 
    z-index: -1000; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0.4; 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.logo, 
 
#logo { 
 
    background-color: rgba(0, 0, 0, 1); 
 
    padding:0; 
 
    margin: 0; 
 
}

<!-- Background --> 
 
<img src="http://lorempixel.com/400/400" id="bg" alt=""> 
 

 
<!-- The image --> 
 
<div class="row"> 
 
    <div class="logo"> 
 
    <img src="http://lorempixel.com/300/150" width="100%" height="150" id="logo" alt="Title" /> 
 
    </div> 
 
</div>