透明背景图像而不使内容透明[重复]答案

【问题标题】：transparent background image without turning the content transparent [duplicate]透明背景图像而不使内容透明[重复]
【发布时间】：2021-10-17 03:13:49
【问题描述】：

我的整个页面都有一个背景。在正文中，我有一个专门为它提供另一个背景图像的表单。我希望该表单的背景稍微透明，以便我可以看到 <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>

附加信息：

引导程序 4.6

【问题讨论】：

一个 png，你的意思是，是的，你需要做的就是使用 png pics????‍♀️????‍♀️
我也试过了。它仍然将内容变为透明。我想要发生的是:: 纯色背景，顶部有一个较小的透明图像。较小的图像上有内容。但内容不透明。
你的意思是水印？github.com/brianium/watermarkjs
最简单的方法是，一旦你将 yow pic 设置在你想要它的位置添加一个 img { opscity: 0.4;} 1 100% 可见

标签： css background-image transparency transparent

【解决方案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>

【讨论】：