Как поставить полностью прозрачные див и текст на полупрозрачный фоне

Question

Я пытаюсь добиться следующего эффекта:

У меня есть DIV с фоновым изображением и полупрозрачный белым background-color поверх него, который действует как фильтр.

Теперь я хочу добавить divs и некоторый текст, который в основном «обходил» фильтр, чтобы они были полностью прозрачными. Есть ли способ сделать это в css или, возможно, в Javascript или что-то еще?

Я использую Bootstrap и jQuery, я также открыт для любых библиотек, которые вы, возможно, знаете, которые могли бы помочь мне здесь.

Edit:

Вот скрипку я только что сделал: https://jsfiddle.net/frbkLuoe/

HTML:

<div class="container"> 
    <div class="filter"> 
     <div class="transparent-block"></div> 
    </div> 
</div> 

CSS:

.container { 
    width:300px; 
    height:300px; 
    background-image:url(http://4.bp.blogspot.com/-RSAdi3NMMs8/VakWj_znRcI/AAAAAAAAAMI/lp19iktRyCw/s1600/Rent%2Broom%2Bstockholm.jpg); 
    background-size:cover; 
} 
.filter { 
    width:100%; 
    height:100%; 
    background-color:rgba(255, 255, 255, 0.7); 
} 
.transparent-block { 
    width:100px; 
    height:100px; 
    background-color:transparent; 
} 

Я хочу .transparent-блок DIV быть прозрачный. Проблема в том, что он наследует фон своего родителя, поэтому даже если я устанавливаю background-color: transparent; или фон: нет; он все еще полупрозрачный белый.

Answer 1

Попробуйте background-color CSS свойство, для полупрозрачного Ьгу RGBA (красный, зеленый, синий, альфа)

.transparent{ 
     background-color: transparent; //transparent 
    } 
    .semi-transparent{ 
     background-color: rgba(255, 255, 255, 0.5); //semi-transparent white 
    }