如何在背景色上添加图像

Question

如何在背景色上添加图像？我想把图片放在div的底部。我用下面的代码试过了，但似乎对我不起作用。参见下面的代码：

.teal {
text-align: center;
padding: 40px;
background-color: #2dd5c4;
background-image: url("https://www.w3schools.com/html/pic_trulli.jpg");
background-repeat: no-repeat;
background-position: bottom;
}

<div class="teal">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo l. igula eget dolor. Aenean massa. <br />
<button> Call to action</button></p>
</div>

Answer 1

也许可以尝试添加！背景图像末尾的重要标签

background-image: url(https://www.w3schools.com/html/pic_trulli.jpg) !important;

Answer 2

您可以将图像放在不同的div中，并使用z-index将其放在您的teal类上，或者将其作为teal类的子组件
z-index

<div class='teal' >
<div class='image' > </div>
<div>

Answer 3

您可以使用这个：

background-image: url();