CSS响应式图片遮罩效果_mask与媒体查询结合

P粉602998670 2025-11-21 00:00:00 次阅读

CSS mask结合媒体查询可实现响应式图片遮罩，通过mask-image控制显示区域，大屏用横向或放射状遮罩，小屏切换为纵向渐隐，适配不同设备浏览习惯，提升视觉表现力。

在现代网页设计中，响应式图片遮罩效果能提升视觉表现力，尤其适用于封面图、作品集或广告区域。通过CSS的mask属性与媒体查询（Media Queries）结合，可以实现不同屏幕尺寸下一致且美观的遮罩效果。

什么是CSS mask遮罩

CSS mask 属性允许你使用图像、渐变或透明度来“遮住”元素的部分区域，只显示你想展示的内容。相比opacity或background-blend-mode，mask更灵活，可实现非矩形裁剪或渐隐边缘。

常用写法：

img {
  mask-image: linear-gradient(to bottom, transparent, black);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
}

上面代码为图片添加从透明到黑色的渐变遮罩，实现底部渐隐效果。

响应式遮罩适配不同设备

在移动端和桌面端，图片尺寸和布局常有差异。使用媒体查询可针对不同屏幕调整遮罩方向、角度或强度。

示例：大屏用横向遮罩，小屏改为纵向

img {
  -webkit-mask-image: linear-gradient(to right, transparent, black);
  mask-image: linear-gradient(to right, transparent, black);
}

@media (max-width: 768px) {
  img {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black);
    mask-image: linear-gradient(to bottom, transparent, black);
  }
}

这样在手机上避免因横向遮罩导致关键内容被遮挡。

结合背景图与容器的遮罩技巧

对背景图使用遮罩时，建议将mask应用于容器而非图片本身，便于控制响应式行为。

HTML结构：

CSS样式：

.hero-image {
  height: 500px;
  background: url('photo.jpg') center/cover;
  -webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
  mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
}

@media (max-width: 480px) {
  .hero-image {
    height: 300px;
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }
}

大屏用圆形放射遮罩突出中心人物，小屏切换为底部线性渐隐，适应竖屏浏览习惯。