css - 背景颜色，顶部有不透明图像

Question

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

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

Answer 1

也许这就是您要查找的内容(运行代码段以查看):

.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>

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