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裡面可以任意設定；