如何将两个背景图像叠加在一起

Question

我最近一直试图制作一个非常简单但很好看的页面来为我即将到来的科学博览会举办一个井字游戏，因为我在8年级。我遇到过我将背景图像置于背景颜色下时的设计，因为它看起来不错。当我尝试在我的gitlab repo中重新创建sinario时，它继续不做我的想法。如果你现在不明白我是一个新手。

如果有人可以给我一些代码或想法如何做，我们将不胜感激。

我检查了所有堆栈，但我找不到类似的问题，所以如果重复我的appologies。

编辑：取出源代码

Answer 1

body {
  margin: 0;
  background-color: rgba(100,0,0,.75);
}

div {
  width: 100vw;
  height: 100vh;
  background-image: url("https://media.starwars.ea.com/content/starwars-ea-com/en_US/starwars/galaxy-of-heroes/news/_jcr_content/ogimage.img.jpg");
  opacity: .5;
  background-repeat: no-repeat;
  background-size: cover;
}

<div></div>

如果没有至少一个HTML元素，我无法找到解决方案，但我希望这能够清楚地展示使用不透明度值堆叠background-image和background-color的能力。