如何将图像粘贴到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>