如何通过CSS让背景图始终隐藏底部35像素区域？

要始终隐藏背景图底部35像素的水印区域，同时保留原有的背景定位和响应式特性，可以通过容器裁剪的方式实现，无需修改背景图本身或调整复杂的百分比定位。

实现思路 #

1. 给头部元素套一个固定高度的父容器，开启overflow:hidden，用于裁剪超出容器范围的内容
2. 将头部背景元素的高度设置为「容器高度 + 35px」，让背景图底部的水印区域超出容器范围，从而被自动裁剪
3. 保留原有的background-size:cover和自定义background-position设置，确保背景图的显示区域符合需求

修改后的代码 #

CSS 代码

.header-container {
  width: 100%;
  height: 400px;
  overflow: hidden; /* 裁剪超出容器的内容 */
}

.bgimage {
  width: 100%;
  height: calc(100% + 35px); /* 高度增加35px，让水印区域超出容器 */
  background-repeat: no-repeat;
  background-size: cover;
}

HTML 代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <!-- 新增父容器用于裁剪 -->
    <div class="header-container">
      <header class="bgimage" style="background-image: url('https://i.sstatic.net/hjPqu.png'); background-position: 50% 0%;">
        <h1 class="display-1 text-center">this is the title</h1>
      </header>
    </div>
    <p>this is the content</p>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

效果说明 #

• 无论屏幕分辨率如何变化，父容器的高度始终保持400px，超出部分的背景图会被裁剪
• 背景图的background-position设置完全不受影响，依然可以根据不同图库页面自定义定位
• 所有背景图底部35px的水印区域都会被容器裁剪掉，不会在头部显示

内容的提问来源于stack exchange，提问作者Christian Specht