Question

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

我在JS小提琴中写了一个快速模拟来演示我想要做什么。我遇到的问题是，当我将不透明度设置为根div时，div的每个子节点都会获得不透明度，我无法覆盖它。我理解我在小提琴中做的方式由于没有修复而无法正常工作，但是如何实现这种效果并在调整大小时保持网站居中？

我可以不使用JS吗？

最后请注意，在JS Fiddle中，文字应为不透明度1，而黄色应保持不透明度0.3

这是JS小提琴：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

背景颜色是＆＃34; RGBa＆＃34;价值帮助你？

.content{
    background-color:rgba(255,255,0,0.3);
    color: #000;
    opacity: 1;
    text-align: center;
}

Answer 2

您可以将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 */
}

Answer 3

.transparency {
background-color: rgba(255, 255, 0, 0.4);    
display: block;
margin: 0 auto;
width: 300px;
z-index: 10000;
position: relative;
height: 500px;
}

.content {
color: #000;
text-align: center;
}

在这里工作演示; http://jsfiddle.net/7LNS4/

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

3 个答案: