html - CSS 背景透明度，文本完全可见

Question

我正在尝试实现这样的效果，我有一个 div 的透明背景颜色(这样我可以看到后面的图像)并保持网站的主要内容居中(即使在调整窗口大小时)。

我用 JS fiddle 编写了一个快速模型来演示我正在尝试做什么。我遇到的问题是，当我将不透明度设置为根 div 时，div 的每个子项都会获得该不透明度，我无法覆盖它。我知道我在 fiddle 中做这件事的方式由于没有修复任何东西而不起作用，但是我如何实现这种效果并在调整大小时保持网站居中？

我可以不用 JS 来做吗？

最后一点，在 JS Fiddle 中，文本的不透明度应为 1，而黄色的不透明度应保持为 0.3

这是 JS fiddle :http://jsfiddle.net/7d6NY/

HTML:

    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQuK9zPKC8rFhpf1S9-2bGCaIUdm9-YMeQiBRdc5rRY_xiQTYvd" alt="image missing" class="bg-image" />
<div class="transparency">
    <div class="content">
        THIS IS MY PAGE CONTENT
    </div>
</div>

CSS:

    .transparency{
    background-color: yellow;
    display: block;
    opacity: 0.3;
    margin: 0 auto;
    width: 300px;
    height: 500px;
}
.content{
    color: #000;
    opacity: 1;
    text-align: center;
}
img{
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1920px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;   
}

Answer 1

您可以使用 rgba ( more info on MDN ) 值作为透明背景颜色 + 不要忘记为图像提供负 z-index 值，以便它堆叠在内容后面:

DEMO

CSS:

.transparency{
    background-color: rgba(255, 255, 0, 0.3); /* <-- this line is modified */
    display: block;
    margin: 0 auto;
    width: 300px;
    height: 500px;
}
.content{
    color: #000;
    text-align: center;
}
img{
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1920px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;  
    z-index:-1; /* <-- this line is added */
}