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

You can do it with CSS3's rgba, but if you want to be compatible with older browsers, use absolute for the outer and inner layers

Answer 2

If the questioner has a learning attitude:
This question must first understand the stacking context
And then look at this to understand the opacity
If you want to solve the problem, I I think the following js solution is good
thatsNotYoChild.js — Fixing Parent-Child Opacity

Answer 3

Use rgba or translucent image as background instead of adding opacity

Answer 4

Thank you for your suggestions. Since I have very little exposure to front-end development and I don’t know much about browser compatibility, I haven’t given it much thought yet.
In addition, I wanted to set the background to an image and did not intend to use a processed translucent image, so I ended up writing it like this:

.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>

If you have any questions, please let me know.

Answer 5

Two methods. The first one is to use a transparent png image as the background. It has the advantages of good compatibility but the disadvantage of occupying capacity

General method: Use the rgba value for the background attribute and use 0. as the last digit to represent transparency

Answer 6

It is recommended to use RGBA, because there is no problem with mainstream browsers, only IE8 and below will have problems

Answer 7

It should be that the background of the picture should be transparent instead of solid color.

There is no need to create a new p, just set it directly in the :after pseudo-class of the container. An approximate example is as follows:

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

In which browser is it opaque?
Ie8 and below use filter:(alpha=35) to control transparency

It is unrealistic to set it to absolute. It is probably because your cotainer does not have a height, so it does not expand the height of the parent element

Answer 9

If you want to be compatible, you can only set the position of back: relative;
Then the container's position:absolute, z-index:1;
Create a layer below back to serve as a transparent layer, position:absolute, z-index: 0, opacity: 0.35.
This way

Answer 10

For a fixed window size, you can set both background and content. position:absolute;top:0; Use z-index to distinguish the front and rear of the z axis; then the outer frame is fixed in size and position: relative;
The background p can be set arbitrarily;