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

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

Use rgba or translucent image as background instead of adding opacity

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.

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

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

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;
}

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

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

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;