Позиционирование непрозрачного содержания по сравнению с позиционированным текстом

Question

Я пытаюсь разместить непрозрачный черный фон за некоторым текстом, но возникают проблемы, поскольку текст всегда находится за непрозрачным цветом. Я не могу использовать z-индекс, поскольку текст относительно позиционирован, кто-нибудь знает, как я могу сделать текст появлением поверх непрозрачного фона?

JS скрипку

http://jsfiddle.net/abtuj3xj/

HTML

<section class="primary" style="background-image: url('http://lorempixel.com/output/fashion-q-c-640-480-9.jpg');" data-bgimg="http://lorempixel.com/output/fashion-q-c-640-480-9.jpg"> 
    <div class="item"> 
     <article> 
      <div class="entry"> 
       <p>A whole bunch of text that goes on top of everything but is relatively positioned</p> 
      </div> 
      <div class="clear">&nbsp;</div> 
     </article> 
    </div> <!-- End div.item --> 
    <p class="scroll-down">Scroll down</p> 
</section> 

CSS

section { 
    position:relative; text-align: center; 
    background-repeat: no-repeat; background-size: cover; 
    min-height:100%; color:#fff; 
} 
.item:after { 
    content: ''; position:absolute; width:100%; height:100%; top:0; left:0; 
    background-color:#000; opacity:0.3; 
} 

Answer 1

Я думаю, что я не понимаю ваш вопрос, однако он все равно стоит попробовать.

http://jsfiddle.net/DIRTY_SMITH/abtuj3xj/1/

section { 
    position:relative; text-align: center; 
    background-repeat: no-repeat; background-size: cover; 
    min-height:100%; color:#fff;z-index: -9999; 
} 

.item:after { 
    content: ''; position:absolute; width:100%; height:100%; top:0; left:0; 
    background-color:#000; opacity:0.3; z-index: -9999; 
}