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

Question

我最近一直在尝试制作一个非常简单但外观漂亮的页面来为我即将到来的科学博览会举办一个井字游戏，因为我在 8 年级。我遇到了当我将背景图像放在背景颜色下时的设计，因为它看起来不错。当我尝试在我的 gitlab 存储库中重新创建 sinario 时，它一直在做我想做的事情。如果你现在还不明白，我还是个新手。

如果有人能给我一段代码或关于如何做的想法，我将不胜感激。

我检查了整个堆栈，但我找不到类似的问题，所以如果它重复我的道歉。

编辑:取出源代码

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 的能力>具有不透明度值。