如何在不改变整个容器的情况下更改css中背景的不透明度

虽然看起来可能很简单，但我需要为一个网站创建一个半透明容器的背景。如果我添加

不透明度：0.5

在

#content

中，我将拥有整个容器，所有的小部件和字母都会变成幽灵。我应该怎么做才能将透明度仅应用于背景图像？一个答案是增加PS内部图片的透明度，但我还是很好奇

#content .container {
    background:url(images/menu_bar.png) left top repeat-y !important;
}

尝试一下：

#content .container {
  width: 500px;
  height: 100px;
  background: url(../images/menu_bar.png) left top repeat-y rgba(0, 0, 0, 0.5) !important;
}

rgba中的“a”设置颜色的不透明度，即“rgb”。当然，您可以根据自己的喜好设置这些值。如果有帮助，请单击复选标记；）

另外，不要忘记设置图像的宽度和高度。

尝试一下：

#content .container {
  width: 500px;
  height: 100px;
  background: url(../images/menu_bar.png) left top repeat-y rgba(0, 0, 0, 0.5) !important;
}

rgba中的“a”设置颜色的不透明度，即“rgb”。当然，您可以根据自己的喜好设置这些值。如果有帮助，请单击复选标记；）

---

另外，不要忘记设置图像的宽度和高度。

解决此问题的一种方法是使用“位置”属性和“z索引”属性。您希望透明的元素将位于其下方，然后不透明内容将位于其上方

例如：

#transparent-box {
   position: absolute; top: 10px; left: 10px;
   z-index: 1;
   }

#opaque-content {
   position: absolute; top: 20px; left: 20px;
   z-index: 2;
   }

警告：

使用此方法时，必须记住您希望内容具有的缩进/填充，然后对其进行适当的定位

---

希望能有所帮助。

解决这个问题的一种方法是使用position属性和z-index属性。您希望透明的元素将位于其下方，然后不透明内容将位于其上方

例如：

#transparent-box {
   position: absolute; top: 10px; left: 10px;
   z-index: 1;
   }

#opaque-content {
   position: absolute; top: 20px; left: 20px;
   z-index: 2;
   }

警告：

使用此方法时，必须记住您希望内容具有的缩进/填充，然后对其进行适当的定位

---

希望这能有所帮助。

你遇到了一个有趣的问题——这类问题总是有有趣的解决方案。我自己也是CSS的忠实粉丝，我尝试通过一些CSS属性来模仿您需要的行为：

但是，如果这不是您需要的，您可以随时调整它以满足您的需要

注意：文本第一次看起来也是透明的，但如果您仔细注意，它就不是了

HTML:

---

你有一个有趣的问题——像这样的问题总是有有趣的解决方案。我自己也是CSS的忠实粉丝，我尝试通过一些CSS属性来模仿您需要的行为：

但是，如果这不是您需要的，您可以随时调整它以满足您的需要

注意：文本第一次看起来也是透明的，但如果您仔细注意，它就不是了

HTML:

---

您可以这样做：

HTML

<div class="wrapper">
    <div class="transparent"></div>
    <div class="content">Text goes here</div>
</div>

---

这将分离出背景不透明度和内容不透明度。绝对定位将确保透明div覆盖整个父div。希望这有帮助

您可以这样做：

HTML

<div class="wrapper">
    <div class="transparent"></div>
    <div class="content">Text goes here</div>
</div>

---

这将分离出背景不透明度和内容不透明度。绝对定位将确保透明div覆盖整个父div。希望这有帮助

我需要将这种透明度应用于一幅图像，而不仅仅是单色背景我需要将这种透明度应用于一幅图像，而不仅仅是单色背景