如何实现半张图片固定定位在屏幕底部的前端效果？

预期效果 #

素材原图 #

实现方案 #

方式1：img标签配合容器裁剪 #

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .bottom-img-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 150px; /* 可自定义调整显示高度 */
      overflow: hidden;
    }
    .bottom-img-container img {
      width: 100%;
      display: block;
    }
  </style>
</head>
<body>
  <!-- 此处放置页面其他内容 -->
  <div class="bottom-img-container">
    <img src="https://i.sstatic.net/WqyOC.png" alt="底部装饰图">
  </div>
</body>
</html>

方式2：背景图实现（代码更精简） #

.bottom-half-img {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: url("https://i.sstatic.net/WqyOC.png") top center / 100% auto no-repeat;
}

说明 #

• position: fixed 让元素固定在视口底部，不受页面滚动影响
• 两种方案均默认显示图片上半部分，超出容器高度的下半段会被自动隐藏
• 修改容器的height参数即可调整图片的显示比例，适配不同场景需求

内容的提问来源于stack exchange，提问作者Rayk Rocha