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

Question

我最近一直在尝试制作一个非常简单但外观漂亮的页面来为即将到来的科学博览会举办井字游戏，因为我在第 8 届grade.I 当我将背景图像放在背景颜色下时遇到了一个设计，因为它看起来不错。当我尝试在我的 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-images 和 background-colors 不透明度的能力值。

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

How to stack two background images over each other

html

css

background-image