领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析正文

css文本、图像纯css实现一个渐变的蒙版效果

nixiaole 2025-05-08 20:33:00 知识剖析 16 ℃

// 文章文本
.mainTxt {
	        mask-image: linear-gradient(to bottom, white 10%, transparent 90%);
}
// 图片
.imgTag {
	        mask-image: linear-gradient(to bottom, white 10%, transparent 90%);
}

以前都是套一个div来实现，现在不需要啦，直接mask-image属性来实现该效果即可！

上一篇：纯css实现动态渐变背景（css设置渐变背景）
下一篇：用css制作头像渐变边框（渐变头像框生成）

猜你喜欢

2025-05-08 Flet布局控件19个大汇总（flex布局菜鸟教程）
2025-05-08 水性防老剂使用中的常见问题-深圳宏元化工原料
2025-05-08 非常实用!AutoCAD辅助绘图从新手到高手
2025-05-08 JimuBI 积木报表 v1.9.5 发布，大屏和仪表盘，免费数据可视化
2025-05-08 9个超高质量设计素材网站（设计类素材网站）
2025-05-08 巧用 CSS 实现酷炫的充电动画（充电动画耗电吗）
2025-05-08 渐变色花束盆栽制作图解教程（渐变色的花朵怎么画作品）
2025-05-08 优作 | 渐变色阶风格APP今年会开始引领潮流吗?
2025-05-08 SVG 径向渐变（径向渐变颜色设置）
2025-05-08 我用提示词做了一份社群日报，记录下我们在AI世界的每一份努力!

最近发表