Flutter 中为背景图片添加半透明蒙层
使用场景:在设置背景图片之后,背景图片的色颜色可能和内容颜色冲突,导致内容不够突出,这种问题通常的做法是在背景上再加一个半透明(或者其他透明图)的图层。
flutter中的用法如下:
Container(
padding: EdgeInsets.only(
top: topPadding,
bottom: 30,
),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
image: DecorationImage(
image: const AssetImage(
"assets/images/user_center_header_bg.webp",
),
fit: BoxFit.cover,
alignment: Alignment.topCenter,
// 关键看这里,为图片添加一个黑色不透明度为0.2的蒙层
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.2), BlendMode.srcOver),
),
),
child: ...
);
浏览 (616)
点赞 (1)
收藏