2016-05-20 2 views
1

この質問は一部で尋ねられ、回答されていますが、回答が完全に見つからないようです。私はブートストラップで反応的なdivを持っています。そして、私は(1)キャンバスが同じ位置と大きさで表示され、(2)テキストがキャンバスの上に表示されるようにします。応答区画のキャンバス上にテキストを配置する

<div class="col-md-9 content-wrapper> 
    <canvas id="canvas" resize="true"></canvas> 
    <p class="statement">Display this text over canvas</p> 
</div> 

CSS:

.statement{ 
    position:relative; 
    top:50%; 
    transform: translateY(-50%); 
} 

#canvas{ 
    width:100%; height:100%; 
} 

任意のアドバイスはありますか?私はキャンバスに何らかのポジションCSSが必要だと知っていますが、私は何を知りませんし、絶対的なポジショニングは私にそれの応答性に問題を与えるでしょう。私はポジショニングのために余分なjavascriptから離れたいと思っていますが、誰かがそれをバグにしない方法を説明できるならば、私はその提案に公開するでしょう。

ありがとうございます!

答えて

3

あなたは、バックグラウンドのdivで

position: relative;

を配置します。

top, bottom, left, right前景のdivの位置に置き

Position: absolute;

。フォアグラウンドコンテナは背景に対して相対的に動作します。つまり、応答性があります。%

+0

を使用してフォアグラウンドの幅を美しく設定していただき、ありがとうございます。 – aceslowman

+0

は、キャンバス上のテキストが少し褪せてしまうのをなぜ知っているのでしょうか?私は多分アルファや何かと関係があると思いますが、完全にはわかりません。 – aceslowman

+0

フィドルやスクリーンショットを見ることなく私は言うことができませんでした。不透明度を使用しているようですね?不透明度は子要素に適用されます。つまり、前景が不透明度を継承している可能性があります。ちょうど推測... –

関連する問題