css - 只有一个 Ddiv 时如何将背景图像置于最前面

Question

我有一个带有背景图像的 Canvas ，代码如下。我怎样才能只用 css 把背景图片放在前面？图像应该出现在 Canvas 前面。

.dvContainer {  
 opacity: .7;
 z-index:-100;
}
.background {
 background-repeat: no-repeat;
 background-image:url(https://i.imgur.com/ITWfejd.png);
 background-position: center;
}

<div>
  <canvas id="myCanvas" class="dvContainer background" width="400" height="300" 
  style="background-color: red;">
  </canvas>
</div>

Answer 1

这样做:-

.dvContainer {  
     opacity: .7;
     z-index:1001;
     display:none;
    }

    .background {
     background-repeat: no-repeat;
     background-image:url(https://i.imgur.com/ITWfejd.png);
     background-position: center;
    }

    <div>
      <canvas id="myCanvas" class="dvContainer background" width="400" height="300" 
      style="background-color: red;">
      </canvas>
    </div>

然后将 Div 元素 放在页面顶部。

如果没有发生，这会将 div 定位在顶部，尝试增加 z-index