2017-09-02 3 views
0

私は以下のコードで背景画像を持つキャンバスを持っています。私はちょうどCSSで前面に背景イメージを持っていくことができますか?画像はキャンバスの前に来るはずです。1つの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

Zインデックスで質問を増加しようと起きていない場合、これは上のdivを見つけます:Dあなたはおそらく前に背景をもたらすことはできない...のz-indexが」勝ちましたここで助けてください...なぜこれを最初に必要としますか? – kukkuz

+0

私はキャンバスでのみ使用されるロジックを持つdivを1つだけ持っています – 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を置きます。

今完全に変更した

+0

'z-index'だけを増やしても、* stacking context *の* * *の上に* parent *は持ち込まれません。 – kukkuz

+0

はい@kukkuzと毎回働いた。 –

+0

しかし、私があなたの指摘した答えでもう一度編集するつもりです。 –

関連する問題