2017-09-02 12 views
0

我有一张带有下面代码背景图像的画布。我怎样才能把背景图像带到前面只用css?图像应该放在画布的前面。如何在仅有一个Ddiv时将背景图像置于前面

.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>

+0

你已经改变了,现在的问题:d你可能无法在面前提起背景...... z-index的赢得了”在这里帮助......你为什么首先需要这个? – kukkuz

+0

我只有一个div,只能在canvas中使用逻辑 – david

回答

0

这样做: -

.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 Element在页面的顶部。

这将定位格在上面,如果不是发生试图在z-index的共增加

+0

单独增加'z-index'不会在*堆叠上下文中将* parent *放在* child *之上*,你试过了吗? – kukkuz

+0

是@kukkuz,每次工作。 –

+0

但是我还有一件事要在你指出的答案中编辑。 –