如何將圖像粘貼到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

請忽略背景顏色：我從第二張圖片剪下它！

我提出了圖像的位置在div裏面有bottalk類的話，我絕對定位的形象，那麼所有你需要做的是設置基於圖像的頂部和左側位置，（Cropped the image online so please ignore the quality of the output）所以現在你可以把它放在任何地方。此外，我已將background-color:pink添加到body以顯示圖片，請忽略此操作。

所以總結一下。我將父類div元素的類別bottalk設置爲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

爲了把圖像轉換成相對於其祖先一個精確的位置，你可以設置將屬性定位爲絕對值，然後使用左上角的屬性，可以確定其確切位置。像這樣：

.bottalkwhite{ 
    position: absolute; 
    left: 250px; 
    top: 0px; 
    } 

雖然在這樣一個特定的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>