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

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

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

            {% endblock %}
        </div>
</div>
</div>

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框架。
求大神解答!!

阅读 18.2k
10 个回答

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

.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;
}
<div class="container-back">
    <div class="back"></div>
    <div class="container">
        <div class="col-lg-10" role="main" id="content">
            {% block content %}

            {% endblock %}
        </div>
    </div>
</div>

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

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

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

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

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

不需要新建一个div,直接在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;
}

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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题