overlay image with text btn

Question

私はブートストラップで新しく、イメージを作成して、その上にタイトルとボタンがあります。

誰もがこれで私を助けてくださいことはできますか？

ありがとうございます。

Answer 1

あなたのpositioningちょっと間違っていました...あなたのボタンの位置bottom: 5rem;ボタンをウィンドウから外しました。あなたの見出しで行ったように代わりtopを使用してください：

.block-hero { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.block-hero-img { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    max-height: 420px; 
 
    object-fit: cover; 
 
} 
 
.block-hero-headline { 
 
    background: rgba(0, 0, 0, 0.9); 
 
    padding: 1rem; 
 
    transition: all 0.2s ease; 
 
    position: absolute; 
 
    top: 3rem; 
 
    left: 1rem; 
 
    max-width: 100%; 
 
} 
 
.mybutton { 
 
    padding: 1rem; 
 
    display: block; 
 
    position: absolute; 
 
    top: 10rem; 
 
    left: 1rem; 
 
    max-width: 100%; 
 
} 
 
h1 { 
 
    font-weight: 700; 
 
    margin: 15px 0; 
 
}

<div class="container-fluid"> 
 
    <div class="row block-hero"> 
 
    <img src="https:/placehold.it/600x450" alt="imgHero.alt" class="block-hero-img" /> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-8 col-sm-12"> 
 
      <h1 class="block-hero-headline">My Heading</h1> 
 
      <a href="#" class="btn mybutton">My button</a> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたは簡単にCMSから背景画像を変更することができます。イメージタグを使用する理由 たとえば、画像がPHPから来ている場合は、次のようなことができます。

<div class="row block-hero" style="background-image:url('<?php echo $imageSource;?>')"> 
</div>