Flutter:获取 css:在图像应用背景的一种效果之后

Question

我有 CSS 规则来为具有白色背景的图像添加背景，如下所示

.product-img:after {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(40,44,63,.05);
   content: '';
   background-blend-mode: overlay;
 }

结果 [![在此处输入图片描述][3]][3]

想要在 flutter 中获得相同的效果，我尝试了几个小部件，例如 Stack、Position、
但达不到同样的效果。

我的图片加载小部件:

FadeInImage(
   image: NetworkImage(
   "my-url"
   ),
   placeholder: AssetImage('assets/images/load_fut.png'),
),

Answer 1

您的图像似乎有纯白色背景。所以要在白色背景上显示需要用混合模式播放位来达到预期的效果。这是接近您要实现的目标的输出。

更新:使用cached_network_image

添加依赖cached_network_image: ^2.2.0+1

  @override
  _ColorPageState createState() => _ColorPageState();
}

class _ColorPageState extends State<ColorPage> {
  @override
  Widget build(BuildContext context) {
    return 
    CachedNetworkImage(
      height: 200,
      width: 400,
      colorBlendMode: BlendMode.darken,
      color: Color.fromARGB(20, 40, 44, 63),
      imageUrl:
          "https://tacskey.com/image/cache/catalog/categories/Cold%20Cuts/chicken-nuggets-600x350.jpg",
      placeholder: (context, url) =>  Image.asset(
          'assets/loader_.png',
          height: 50,
          width: 50,
      ),
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  }
}

输出动图: