Html 如何更改元素'；s不透明度/透明度，并保持身体背景图像仍然可见？

我在编码方面是新手，也是这里要问的第一个问题

这是我第一次在网上找不到答案，可能是因为我无法很好地解释/描述它。但在这里我可以发布一张照片

你能帮我用CSS怎么做吗

---

非常感谢

您可以为元素设置背景： 背景色：rgba（0,0,0,0.5）；

---

注意0.5。它从0运行到1。越高越暗。

您可以为元素设置背景： 背景色：rgba（0,0,0,0.5）； 注意0.5。它从0运行到1。越高越暗。

• 创建具有绝对位置的div
• 将其背景色设置为黑色
• 将其不透明度设置为0.5（根据需要调整不透明度，从而确定您的透明度级别）

html{
宽度：100%，高度：100%；
}
正文{
背景图片：url(https://i.stack.imgur.com/wwy2w.jpg);
身高：100%；
宽度：100%；
背景尺寸：封面；
}
#黑匣子{
位置：绝对位置；
背景色：黑色；
不透明度：0.5；
宽度：50%；
排名前10%；
左：10%；
身高：50%；
}

• 创建具有绝对位置的div
• 将其背景色设置为黑色
• 将其不透明度设置为0.5（根据需要调整不透明度，从而确定您的透明度级别）

html{
宽度：100%，高度：100%；
}
正文{
背景图片：url(https://i.stack.imgur.com/wwy2w.jpg);
身高：100%；
宽度：100%；
背景尺寸：封面；
}
#黑匣子{
位置：绝对位置；
背景色：黑色；
不透明度：0.5；
宽度：50%；
排名前10%；
左：10%；
身高：50%；
}

---

您需要为背景图像添加一个div，我已经添加了该div，然后您需要另一个div来垂直对齐内容，类似于您的示例，最后是第三个div，用于保存内容

HTML:

<div class="background">
   <div class="background-module">
      <div class="background-info">
          <h1>Hello</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non imperdiet enim. Aenean eget dolor in risus aliquam pellentesque. Ut porta nec ex vel tincidunt. Maecenas varius accumsan posuere. Donec non blandit ipsum. Duis vel eros nunc. Donec aliquam ac ipsum et ultrices.</p>
          <form>
            <input type="email" />
            <button type="submit">Submit</button>
          </form>
       </div>
    </div>
</div>

---

这里是一个指向工作小提琴的链接>

您需要为背景图像添加一个div，我已经添加了这个div，然后您需要另一个div来垂直对齐内容，类似于您的示例，最后是第三个div来保存内容

HTML:

<div class="background">
   <div class="background-module">
      <div class="background-info">
          <h1>Hello</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non imperdiet enim. Aenean eget dolor in risus aliquam pellentesque. Ut porta nec ex vel tincidunt. Maecenas varius accumsan posuere. Donec non blandit ipsum. Duis vel eros nunc. Donec aliquam ac ipsum et ultrices.</p>
          <form>
            <input type="email" />
            <button type="submit">Submit</button>
          </form>
       </div>
    </div>
</div>

这里有一个链接，指向一把正在工作的小提琴>

你可以试试看

HTML:

你可以试试看

HTML:

---

是的。谢谢！我一直在使用十六进制，我现在看到RGB也有优势。谢谢！我一直在使用十六进制，我现在看到RGB也有优势。谢谢你的评论。问题中给出了原因。谢谢你的评论。问题中给出了原因。

<div class="container">
  <div class="inner">
    <div class="content">
      <p>Content</p>
      <div class="overlay"></div>
    </div>    
  </div>
</div>

.container {
  width:1400px;
  background: white url(http://lorempixel.com/1400/1200/nature/1/) no-repeat center;
  height: 400px;
  padding: 50px 0;
  margin : 20px auto;
}
.content {
  display:block;
  width: 50%;
  height: 200px;
  background:transparent;
  margin: 0 auto;
  position:relative;
}
.overlay {
  width:100%;
  height:200px;
  background: rgba(0,0,0,0.7);
  position:absolute;
  left:0;
  top:0;
  z-index: 0;
}
p {
  padding: 20px;
  color: #FFFFFF;
  position: relative;
  z-index: 1;
}