イメージ内のテキスト

Question

私はちょうどこのように私のイメージの内側に私のh2のテキストと小さな段落を追加したい。

私はH1とテキストを追加すると、画像の下に位置しています。

は、これは悪いCSSのポジショニングのために起こったのですか？

これは、これを行うのが一般的で、CSS position:relative;と<div>ですべてをラップして、画像の上にそれらをもたらすために、テキスト要素にCSS position:absolute;を与えることであろう私のコード

<div className="committeeBackground"> 
        <img src="/images/conference.jpg" alt=""/> 
        <h1>Who</h1> 
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        </p> 
       </div> 

.committeeBackground{ 
img{ 
    width: 100%; 
} 
} 

Answer 1

それはflexを使用して、トップにposition: absolute

.wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.ontop { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.ontop > div { 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 24px; 
 
}

<div class="wrapper"> 
 
    <img src="http://lorempixel.com/400/300/animals/6" alt=""> 
 
    <div class="ontop"> 
 
    <div> 
 
     <h2>Test Text</h2> 
 
     <p><i>Dummy Text Under H2</i></p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

です。次に、top:0;やtop:30%;などのさまざまな属性を使用してテキストを削除することができます。すべてのテキストをまとめて保存したい場合は、<div>に異なるテキストエレメントをすべてラップして、position:absolute;のスタイルposition:absolute;を<div>に付けて、すべてのテキストを一緒に移動できるようにすることもできます。

それは意味がありますか？

私はdiv要素の背景となる画像を設定します。

Answer 3

これは、私はあなたが探しているものを行う方法です。そして、私は内部の要素について心配しています。

.backgroundImage { 
 
    background: url('http://placehold.it/300?text=%20'); 
 
    width: 300px; 
 
    height: 300px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.block { 
 
    display:block; 
 
    text-align: center; 
 
}

<div class="backgroundImage"> 
 
    <div class="block"> 
 
    <h2>Test Text</h2> 
 
    <p><i>Dummy Text Under H2</i></p> 
 
    </div> 
 
</div>

Answer 4

あなたは背景画像

<div className="committeeBackground"> 
       <img src="/images/conference.jpg" alt=""/> 
       <h1>Who</h1> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
       </p> 
      </div> 
.committeeBackground{ 
    background-image: url("/images/conference.jpg"); 
} 

やCSS>位置を使用する時に、あなたのイメージを置くことができます：絶対;あなたの子供に、および位置：あなたのコンテナのdivに対する "committeeBackground"

<div className="committeeBackground"> 
       <img src="/images/conference.jpg" alt=""/> 
       <h1>Who</h1> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
       </p> 
      </div> 
.committeeBackground{ 
    position: relative; 
} 
.committeeBackground > * { 
    position: absolute; 
    left: 50%; 
    top: 50% 
}