html - css实现背景透明内容不透明。

Question

我想做成背景透明，中间的container不透明的样子

<p class="back">
<p class="container bs-docs-container">
        <p class="col-lg-10" role="main">
            {% block content %}

            {% endblock %}
        </p>
</p>
</p>

css：

.back{
    position: absolute;
    margin-left: 20px;
    margin-right: 20px;
    background: url(images/back.png);
    background-repeat: no-repeat;
    opacity: 0.35;
    z-index: 1;
}

网上有说把position设置成absolute，但这样压根不显示了。
用z-index也不行。
用的是flask框架。
求大神解答！！

Answer 1

用css3的rgba就能做到，但如果想兼容老版本浏览器的话外层和内层用absolute去做

Answer 2

如果提问者是抱着学习的态度：
这个问题首先要理解stackting context
然后看这个理解opacity
如果是想解决问题，我觉得下面这个js解决方案不错
thatsNotYoChild.js — Fixing Parent-Child Opacity

Answer 3

使用 rgba 或者半透明图片做 background，而不是加 opacity

Answer 4

谢谢大家的建议，由于我接触前端开发很浅，浏览器兼容的问题还不是很懂，目前还没怎么考虑。
再加上我是想把背景设置为图片，也不打算用处理过的半透明图片，所以最终写成了这样：

.back{
    position: absolute;
    width: 1500px;
    height: 1500px;
    margin-left: 0px;
    margin-right: 0px;
    background: url(images/back.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.35;
    z-index: 0;
}
.col-lg-10#content{
    height: 1500px;
    margin-left: 5px;
    margin-right: 5%;
    margin-top: 0px;
    background: rgba(255,255,255,0.8);
    z-index: 1;

}
.container{
    height: 1500px;
    margin-left: 0px;
}
.container-back{
    margin-left: 5px;
    margin-right: 5px;
}

<p class="container-back">
    <p class="back"></p>
    <p class="container">
        <p class="col-lg-10" role="main" id="content">
            {% block content %}

            {% endblock %}
        </p>
    </p>
</p>

有什么问题还请大家指教。

Answer 5

两个方法 第一个用透明png图作为背景 优点兼容性好 缺点占容量

通用办法 background属性用rgba值 最后一位用0.几代表透明度

Answer 6

建议用RGBA,因为主流的浏览器都没问题，只有IE8以下会有问题

Answer 7

应该是图片背景想透明而不是纯色吧。

不需要新建一个p，直接在container的:after伪类里设置就可以了，大概例子如下：

section {
    display: block;
    width: 100%;
    height: 600px;
    background: #f1f3f5;
    position: relative;
}
section:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.35;
    background: url(img/bg.jpg) center center no-repeat;
}

Answer 8

哪个浏览器下不透明呢？
ie8及以下用filter:(alpha=35)控制透明度

设成absolute不现实估计是你cotainer没高度，就没把父元素高度撑开

Answer 9

如果想要兼容的话只能back的position:relative;
然后container的position:absolute，z-index:1;
back下面再建立一个层来当透明层，position:absolute，z-index:0，opacity: 0.35。
这样

Answer 10

固定窗口大小的，可以讲背景+内容都设置position:absolute;top:0;使用z-index区分z轴前后；然后外框固定大小并position:relative;
背景p里面可以任意设置；