顶部带有不透明图像的背景颜色答案

【问题标题】：background color with an opaque image over the top顶部带有不透明图像的背景颜色
【发布时间】：2017-06-18 02:28:42
【问题描述】：

我想使用背景颜色以及透明（或不透明）背景图像。这可能吗？

我尝试过使用 div 命令，但可能做错了。我能看到的唯一 opacity 命令是在 CSS 中，但是如何将它专门链接到背景图像，而不仅仅是正文内容？

【问题讨论】：

请指定一种编程语言，例如 HTML 或 JavaScript。

标签： css image colors background transparent

【解决方案1】：

也许这就是你要找的东西（运行 sn-p 来查看）：

.stack{
  height: 200px;
  width: 200px;
  background-color: #ddd;
  position:relative;
}

.layer {
  position: absolute; 
  top: 0; 
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png');
}

.base{
  filter: opacity(.3);
  -webkit-filter: opacity(.3);
}

.offset{
  margin-top: 20px;
}

<div class="stack">
  <div class="layer base">
  </div>
  <div class="layer offset">
  </div>
</div>

我在顶层添加了一个边距，以便您看到在另一层之下有两个第一层（基础）。如果您删除边距，您应该会看到完美对齐的图像。

【讨论】：

老实说，我认为我没有很好地解释自己，对此感到抱歉。我想要一个黑色背景，顶部有一个拉伸图像（作为背景图像），但我想让它褪色（透明），然后能够在它上面添加对象（实心对象）。使用您提供的代码，当我尝试添加对象时，它会将它们放在图像的上方或下方，除非我将它们包含在 div 中，然后将相同的参数（即不透明度）应用于它们，因此它们不是实心的。我必须创建褪色的背景图像吗？还是有其他方法可以解决它？
我的回答有用吗？
这很好，但是我只能使用 1 个纯图像（与背景相同）我需要在不透明的背景上放置几个不同的对象。很抱歉让你头疼。