如何创建可变宽高的矩形遮罩Div？求解决方案

你要的可变宽高矩形遮罩可以用CSS的mask属性实现，比圆形遮罩更简单，直接通过自定义变量就能灵活调整遮罩的位置和大小，下面是具体实现：

完整代码 #

HTML #

<div class="rect-mask-container">
  <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre">
</div>

CSS #

.rect-mask-container {
  /* 这四个变量用来控制遮罩的位置和尺寸，直接改数值就能调整 */
  --mask-left: 80px;
  --mask-top: 60px;
  --mask-width: 450px;
  --mask-height: 280px;

  width: 600px;
  height: 400px;
  position: relative;
  /* 核心遮罩样式，合并写法更简洁 */
  -webkit-mask: linear-gradient(black, black) var(--mask-left) var(--mask-top)/var(--mask-width) var(--mask-height) no-repeat;
  mask: linear-gradient(black, black) var(--mask-left) var(--mask-top)/var(--mask-width) var(--mask-height) no-repeat;
}

.rect-mask-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

用法说明 #

• 直接修改--mask-left（遮罩左偏移量）、--mask-top（遮罩上偏移量）、--mask-width（遮罩宽度）、--mask-height（遮罩高度）这四个变量的数值，就能快速调整遮罩的位置和大小
• 遮罩区域内会完整显示图片内容，区域外自动变为透明
• 纯CSS实现，无需JS，兼容Chrome、Firefox、Edge等现代浏览器

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