网站开发：如何为单张图片设置10%白色+其余蓝色双背景色？

嘿，我明白你的需求——页面顶部有白、蓝两个相邻区块，要让那个.screenshot_water里的图片，顶部10%区域透出上方的白色背景，剩下90%区域贴合下方的蓝色背景。下面给你分享几个靠谱的实现思路，你可以根据自己的场景选：

方案1：拆分图片容器，用clip-path裁剪显示区域 #

这个思路最简单直接，把图片拆成上下两部分，分别放到白色区块和蓝色区块里，用裁剪属性控制各自显示的比例。

调整后的HTML + CSS代码： #

<div class="row bg-white">
  <div class="col-lg-6">
    <!-- 图片顶部10%的容器 -->
    <div class="screenshot-top"></div>
  </div>
  <div class="col-lg-6"></div>
</div>
<div class="row bg-blue">
  <div class="col-lg-6">
    <!-- 图片底部90%的容器 -->
    <div class="screenshot-bottom"></div>
  </div>
  <div class="col-lg-6">some text </div>
</div>

.screenshot-top, .screenshot-bottom {
  /* 两张"分片"用同一张背景图，确保对齐 */
  background-image: url('你的图片地址');
  background-size: cover;
  background-position: center center;
}

.screenshot-top {
  /* 裁剪掉底部90%，只留顶部10%显示 */
  clip-path: inset(0 0 90% 0);
  height: 60px; /* 这里的高度要和白色区块的高度匹配，比如白色区块总高600px，这里就设60px */
}

.screenshot-bottom {
  /* 裁剪掉顶部10%，只留底部90%显示 */
  clip-path: inset(10% 0 0 0);
  height: 540px; /* 对应蓝色区块里要显示的高度，600px*90%=540px */
}

方案2：单容器偏移+遮罩，不改动原有HTML结构 #

如果你不想调整HTML结构，这个方案更合适——把图片容器向上偏移，覆盖到白色区块，再用渐变遮罩让顶部10%透明，透出白色背景。

代码示例（保留原HTML）： #

.bg-white {
  position: relative;
  z-index: 1; /* 确保白色区块在图片遮罩层上方 */
  height: 60px; /* 白色区块高度，按实际情况设置 */
}

.bg-blue {
  position: relative;
}

.screenshot_water {
  position: absolute;
  top: -60px; /* 向上偏移白色区块的高度，刚好覆盖到白色区块 */
  left: 0;
  width: 100%;
  height: calc(100% + 60px); /* 高度=蓝色区块高度+白色区块高度 */
  background-image: url('你的图片地址');
  background-size: cover;
  background-position: center;
  /* 渐变遮罩：顶部10%透明（透出白色），剩下区域不透明（显示图片+蓝色背景） */
  mask-image: linear-gradient(to bottom, transparent 10%, #000 10%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 10%); /* 兼容WebKit浏览器 */
}

方案3：固定背景配合区块高度（适合全宽大图场景） #

如果你的图片是全屏宽度的，还可以用固定背景属性，让图片固定在视口，然后通过白、蓝区块的高度比例来实现显示效果：

.screenshot_water {
  background-image: url('你的图片地址');
  background-size: cover;
  background-attachment: fixed; /* 图片固定在视口，不随滚动移动 */
}

.bg-white {
  height: 10vh; /* 占视口高度10%，对应图片显示白背景的区域 */
  position: relative;
  z-index: 1;
}

.bg-blue .col-lg-6:first-child {
  height: 90vh; /* 占视口高度90%，对应图片显示蓝背景的区域 */
}

小提醒： #

• 方案1要注意上下两个图片容器的background-position完全一致，避免出现拼接错位；
• 方案2的mask-image在旧版浏览器可能需要前缀，记得加上-webkit-；
• 方案3的background-attachment: fixed适合全屏场景，滚动时图片位置不会变，体验和前两种不同。

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