使用不透明度在CSS3中设置背景样式？

Question

我有一个简单的CSS样式问题。我一直试图在背景上创建这种效果以匹配设计，但我似乎无法做到正确。

以下是我的

这是设计

有没有人有任何提示可以帮我创建背景效果？任何帮助，将不胜感激。

我的代码现在，如果它有帮助：

.backgroundOverlay {
  background-image: url('../images/background-pattern.png'), linear-
  gradient(to bottom right, rgba(0,118,255,0.8), rgba(0,197,255,0.8));
  /* opacity: 0.3;  */
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 15vw 5vw; */

}

背景图片只是一个重复的.png文件

提前谢谢

Answer 1

使用此：

.container{
  width: 100%;
  height: 300px;
  border: 1px solid #000;
  position: relative;
}
.container .content{
  position: absolute;
  z-index:999;
  text-align: center;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.container::after{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index:99;
  background-image: url("path/to/yourfile.png");
  background-size: repeat;
  opacity: 0.4;
}

<div class="container">
   <div class="content">
     <img src="path/to/your/upper_frame.png" />
   </div>
</div>