如何在不影响子元素的情况下淡化背景图像

Question

我无法实现其他帖子中描述的解决方案，可能是因为我正在使用bootstrap3。

这是我的代码：

#ouverture .container {
	position: relative;
	opacity: 0.99;
}

#ouverture .container:before {
	content: "";
    opacity: .1;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
	background-image: url(images/index-carrousel/puzzle.jpg);
	background-size: 100px;
	background-repeat: repeat;
}

	<section id="ouverture" class="spacer">
		<div class="container">
			<p>Nous avons l'intention de développer une politique d'ouverture
				et de dialogue à l'intérieur de notre parti mais aussi avec les
				autres sensibilités qui s'exprimment à Blonay.</p>
			<p>Cela commence en vous offrant la parole, rejoignez-nous pour
				mettre votre pierre à l'édifice !</p>
			<p>Venez écrire la suite avec nous ...</p>
		</div>
	</section>

不显示背景图像，仅显示文本。当我只设置背景图像语句时，一切都在显示，但我没有看到我的文字很好，因为在图像强度上。

不知道出了什么问题，因为在我看来，我重现了这里的例子。