如何让div实现类似数字艺术中layer mask（图层蒙版）的局部图像显示效果？

你想要的效果可以通过几种CSS方法实现，下面是适合新手的方案，结合你的现有代码修改：

方法1：overflow:hidden + 背景图定位（最基础） #

这个方法是把图片作为容器背景，通过调整背景位置显示局部，再用overflow: hidden隐藏超出容器的部分，模拟蒙版效果。

修改后的代码 #

CSS部分

#fulldiv {
  position: absolute;
  z-index: 9;
  border: 2px solid #302058;
  text-align: center;
  height: 150px;
  width: 200px; /* 定义显示区域的宽度 */
  overflow: hidden; /* 隐藏容器外的内容 */
  background-image: url('你的图片地址'); /* 替换成你的图片URL */
  background-position: -50px -30px; /* 调整数值控制显示图片的局部，负数代表向左/向上偏移 */
  background-size: cover; /* 保持图片比例覆盖容器，也可设为原图尺寸如`800px 600px` */
}

#browserhead {
  width: 100px;
  padding: 5px;
  z-index: 10;
  background-color: #302058;
  color: #ffffff;
  position: relative; /* 确保标题在图片上方 */
}

HTML部分

<div id="fulldiv">
  <div id="browserhead">Title</div>
</div>

原理：容器#fulldiv的大小就是你要展示的局部区域尺寸，background-position控制图片在容器内的偏移位置，overflow: hidden会自动切掉容器外的图片部分。

方法2：clip-path（支持不规则形状蒙版） #

如果需要非矩形的显示区域（比如圆形、多边形），可以用clip-path直接定义裁剪路径：

示例代码 #

CSS部分

#fulldiv {
  position: absolute;
  z-index: 9;
  border: 2px solid #302058;
  text-align: center;
  height: 150px;
  width: 200px;
}

#image-mask {
  width: 100%;
  height: 100%;
  background-image: url('你的图片地址');
  background-size: cover;
  /* 上下左右各裁剪20px，实现矩形蒙版；也可用circle(50%)、polygon()定义形状 */
  clip-path: inset(20px 20px 20px 20px);
}

#browserhead {
  width: 100px;
  padding: 5px;
  z-index: 10;
  background-color: #302058;
  color: #ffffff;
  position: absolute;
  top: 0;
}

HTML部分

<div id="fulldiv">
  <div id="browserhead">Title</div>
  <div id="image-mask"></div>
</div>

方法3：CSS mask属性（最接近图层蒙版逻辑） #

这个方法和PS的图层蒙版逻辑一致：用黑白图（白色区域显示原图，黑色区域隐藏）或渐变作为蒙版，灵活控制显示范围。

示例代码 #

CSS部分

#fulldiv {
  position: absolute;
  z-index: 9;
  border: 2px solid #302058;
  text-align: center;
  height: 150px;
  width: 200px;
}

#masked-image {
  width: 100%;
  height: 100%;
  background-image: url('你的图片地址');
  background-size: cover;
  /* 用渐变做蒙版：上下20%透明，中间60%显示 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 20%, black 80%, transparent 80%);
  mask-image: linear-gradient(to bottom, transparent 20%, black 20%, black 80%, transparent 80%);
}

#browserhead {
  width: 100px;
  padding: 5px;
  z-index: 10;
  background-color: #302058;
  color: #ffffff;
  position: absolute;
  top: 0;
}

HTML部分

<div id="fulldiv">
  <div id="browserhead">Title</div>
  <div id="masked-image"></div>
</div>

如果用图片蒙版，把mask-image替换为url('你的蒙版图片地址')即可，蒙版的灰色区域会让原图呈现半透明效果。

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