在div底部显示背景图片实现代码

为了在div底部显示背景图片，可以使用以下步骤：

第一步：为div设置样式

首先在HTML文件中创建一个div元素，并为该元素设置样式。这里需要设置div的高度，以及背景图片的相关属性。具体代码如下：

<div class="my-div"></div>

.my-div {
  height: 200px;
  background-image: url("背景图片的url地址");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

以上代码中，.my-div 表示class为 my-div 的div元素。background-image 设置背景图片的url地址，background-repeat 设置是否重复背景图片，background-size 设置背景图片的尺寸，background-position 设置背景图片在div中的位置，这里设置为底部。

第二步：使用CSS弹性盒子实现div底部对齐

为了让div元素底部对齐，可以使用CSS弹性盒子display: flex。在div父元素上添加 display: flex，然后将 align-items: flex-end 以及其他相关属性加入到 flex 父元素样式中。具体代码如下：

<div class="container">
  <div class="my-div"></div>
</div>

.container {
   display: flex;
   align-items: flex-end;
   height: 300px;
 }

 .my-div {
   height: 200px;
   background-image: url("背景图片的url地址");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom;
 }

以上代码中，.container 表示div的父元素，align-items 设置弹性容器项目在交叉轴上如何对齐，这里设置为底部对齐。

示例1：底部显示车辆图片

如下代码实现了在底部显示车辆图片的效果：

<div class="container">
  <div class="my-div"></div>
</div>

.container {
  display: flex;
  align-items: flex-end;
  height: 300px;
}

.my-div {
  height: 200px;
  background-image: url("https://cdn.pixabay.com/photo/2015/05/28/23/12/auto-788747_960_720.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

点击查看效果：底部显示车辆图片

示例2：底部显示自然风光

如下代码实现了在底部显示自然风光的效果：

<div class="container">
  <div class="my-div"></div>
</div>

.container {
  display: flex;
  align-items: flex-end;
  height: 300px;
}

.my-div {
  height: 200px;
  background-image: url("https://cdn.pixabay.com/photo/2016/02/19/11/32/hiking-1209800_960_720.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

点击查看效果：底部显示自然风光