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

如果“图像 [that] 具有白色背景”是指透明图像，那么要为该类型的图像赋予背景颜色，您可以使用 Container 小部件并给它你想要的颜色，这将是背景颜色。

如下所示：

Container(
    color: Color.fromRGBO(40, 44, 100, .05),
    child: Image.network(imageUrl)
)

Answer 2

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

更新：使用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),
    );
  }
}

输出gif：

Flutter：得到 css ：在图像应用背景的一种效果之后

Flutter: getting css :after kind of effect for image to apply background

flutter

flutter-web