イメージをCSSのdivブロックに貼り付けるには？

Question

CSSのdivブロックに画像を貼り付けようとしています。マージンを使って「イメージ」を動かすことができなかった...私は何をすることができますか？アドバイスをいただければ幸いです。ありがとうございました。私はあなたができる

.bottalk { 
 
    background-color: white; 
 
    height: 100px; 
 
    width: 200px; 
 
    margin-top: 20px; 
 
    margin-left: 280px; 
 
    border-radius: 1.5em; 
 
    } 
 

 
    .bottalk p { 
 
    padding-top: 5px; 
 
    padding-left: 15px; 
 
    } 
 

 
    .bot .bottalkwhite { 
 
    height: 40px; 
 
    margin-left: 250px; 
 
    margin-top: 0px; 
 
    } 
 

 
    .bottalk button { 
 
    background-color: yellow; 
 
    color: purple; 
 
    padding: 5px 5px; 
 
    border: none; 
 
    margin-left: 50px; 
 
    box-shadow: 3px 3px 2px #666666; 
 
    }

<div class="col-6 bot"> 
 
    <div class="bottalk"> 
 
    <p>Ready to get started?</p> 
 
    <button>Let's talk</button> 
 
    </div> 
 
    <img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" /> 
 
    </div> </div>

現在のビュー

Answer 1

背景色を無視してください：私は2番目の画像から切り取りました！

は、私は、その後、私は絶対にあなたがする必要があるすべては、画像に基づいて、トップと左の位置を設定することで、画像を配置、クラスbottalkでのdiv内の画像の位置を移動している（Cropped the image online so please ignore the quality of the output）今どこにでも配置することができます。また、bodyにbackground-color:pinkを追加して画像を表示していますが、これも無視してください。

要約すると、私はクラスbottalkを持つ親div要素をposition:relativeと設定し、クラスbottalkwhiteを持つ子画像をposition:absoluteと設定して、親の内部に配置できるようにしました。ポジションアブソリュートはposition:relativeの直下の親を基準にしてポジションをとります。

body{ 
 
    background-color:pink; 
 
} 
 

 
.bottalk { 
 
    position: relative; 
 
    background-color: white; 
 
    height: 100px; 
 
    width: 200px; 
 
    margin-top: 20px; 
 
    margin-left: 280px; 
 
    border-radius: 1.5em; 
 
    } 
 

 
    .bottalk p { 
 
    padding-top: 5px; 
 
    padding-left: 15px; 
 
    } 
 

 
    .bot .bottalkwhite { 
 
    height: 40px; 
 
    position: absolute; 
 
    top: 80%; 
 
    left: -30px; 
 
    } 
 

 
    .bottalk button { 
 
    background-color: yellow; 
 
    color: purple; 
 
    padding: 5px 5px; 
 
    border: none; 
 
    margin-left: 50px; 
 
    box-shadow: 3px 3px 2px #666666; 
 
    }

<div class="col-6 bot"> 
 
    <div class="bottalk"> 
 
    <p>Ready to get started?</p> 
 
    <button>Let's talk</button> 
 
    <img src="https://i.stack.imgur.com/7i9bY.gif" alt="bottalk" class="bottalkwhite" /> 
 
    </div> 
 
    </div> </div>

Answer 2

を実装したい何

position: relative;を使用して、次のコードのようなトップと左のプロパティの値は、調整：その祖先に正確な相対位置に画像を置くために

.bottalk { 
 
    position: relative; 
 
    left: -5px; 
 
    top: 10px; 
 
    background-color: white; 
 
    height: 100px; 
 
    width: 200px; 
 
    margin-top: 20px; 
 
    margin-left: 280px; 
 
    border-radius: 1.5em; 
 
    } 
 

 
    .bottalk p { 
 
    padding-top: 5px; 
 
    padding-left: 15px; 
 
    } 
 

 
    .bot .bottalkwhite { 
 
    height: 40px; 
 
    margin-left: 250px; 
 
    margin-top: 0px; 
 
    } 
 

 
    .bottalk button { 
 
    background-color: yellow; 
 
    color: purple; 
 
    padding: 5px 5px; 
 
    border: none; 
 
    margin-left: 50px; 
 
    box-shadow: 3px 3px 2px #666666; 
 
    }

<div class="col-6 bot"> 
 
    <div class="bottalk"> 
 
    <p>Ready to get started?</p> 
 
    <button>Let's talk</button> 
 
    </div> 
 
    <img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" /> 
 
    </div> </div>

Answer 3

を、ユーザーが設定することができますpositionプロパティをleft-right-top-bottomプロパティを使用して絶対値に設定すると、その正確な位置を決定できます。

このような特定のCSSルール定義では、クラスセレクタの代わりにidセレクタを使用する方が適切です。

Answer 4

画像のラッパー要素にposition:relativeを使用して、左下隅にposition: absolute、left: 0とbottom: 0を介して画像を位置付けます。次に、希望の効果を得るために、transform: translateで位置を調整します。

注：イメージをdiv.botttalkコンテナに移動して、親に対して相対的な位置に配置しました。それは働いていた

body { 
 
    background: #715886; 
 
    font-family: Open Sans, Arial, sans-serif; 
 
} 
 
.bottalk { 
 
    background-color: white; 
 
    width: 200px; 
 
    margin-top: 20px; 
 
    margin-left: 100px; 
 
    border-radius: 8px; 
 
    padding: 24px 16px; 
 
    position: relative; 
 
    text-align: center; 
 
    color: #715886; 
 
} 
 

 
.bottalk .bottalkwhite { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 40px; 
 
    color: white; 
 
    transform: translate(-100%, 100%) translate(16px, -16px); 
 
} 
 

 
.bottalk h4 { 
 
    line-height: 1; 
 
    margin: 0 0 24px 0; 
 
} 
 

 
.bottalk button { 
 
    cursor: pointer; 
 
    color: #715886; 
 
    display: inline-block; 
 
    background-color: #fbcb33; 
 
    font-weight: bold; 
 
    padding: 0 32px; 
 
    border: none; 
 
    line-height: 40px; 
 
    font-size: 14px; 
 
    box-shadow: 0px 1px 2px #666666; 
 
}

<div class="col-6 bot"> 
 
    <div class="bottalk"> 
 
    <h4>Ready to get started?</h4> 
 
    <button>Let's talk</button> 
 
    <img src="https://i.imgur.com/oeUdlld.png" alt="bottalk" class="bottalkwhite" /> 
 
    </div> 
 
</div>