SuperAPI AI 工具集

css-alpha-masking

前端与建站

查看项目

更新于 10-15 21:09

技能介绍

用途:为元素添加 CSS alpha 遮罩,实现水平(左右)或垂直(上下)方向的边缘渐隐效果。

主要能力:使用 linear-gradient 生成遮罩,可控制方向(to right、to left、to bottom、to top)、渐隐深度(调整 15% 与 85% 停止点)以及强度(将 transparent 改为 rgba(0,0,0,0.2) 等获得更柔和的过渡)。

使用方式:将遮罩样式直接写在元素上或放入 CSS 类中。水平渐隐示例:mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); 垂直渐隐将 to right 改为 to bottom 即可。务必同时提供 mask-image 与 -webkit-mask-image 以兼容 Safari。

适用场景:图片、文字或容器背景的边缘渐隐。

限制与注意:遮罩只影响 alpha 通道,元素需有可见内容;不要期望在 overflow: hidden 但背后无可见内容的元素上生效;缺少规格时应先确认渐隐方向、边缘宽度以及用于图片、文字还是容器背景。