透明背景图像而不将内容变为透明

Question

我的整个页面都有背景。在主体内部，我有一个表单，该表单具有另一个专门用于它的背景图像。我希望该表格的背景略微透明，以便我可以看到 <body> 背景图像。

我的代码做了什么：

使背景和表单中的内容都透明

我想要发生的事情：

仅使背景图像稍微透明，其中内容的文本保持 100% 不透明度。

<style>
    #mainbody{
        background-image: url("/images/forest3.jpg");
        background-repeat: no-repeat;
        background-size: auto;
        background-size: 100% 100%;
        min-height: 700px;
        opacity: .5;
    }
    #mainbodyContent{
        opacity: 1;
    }
    body{
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("/images/trianglify/trianglifyBlue.png");
    }
</style>

<body>
    <div id="mainbody">
       <div id="mainbodyContent">
           ...some content
        </div>
    </div>
</body>

补充信息：

bootstrap 4.6

Answer 1

在这种情况下，通过将伪元素拉伸到块的大小并设置必要的样式来使用伪元素。

body {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://i.stack.imgur.com/GEVAe.png");
}

#mainbody {
  position: relative;
  min-height: 700px;
  color: yellow;
}

#mainbody::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background-image: url("https://i.stack.imgur.com/57ffF.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.5;
}

#mainbodyContent {
  color: white;
}

<body>
  <div id="mainbody">
    ... some content in "#mainbody"
    <div id="mainbodyContent">
      ... some content in "#mainbodyContent"
    </div>
  </div>
</body>

透明背景图像而不将内容变为透明

transparent background image without turning the content transparent

css

transparency

transparent

background-image